Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   цикл + jquery (https://javascript.ru/forum/events/43829-cikl-jquery.html)

piraids 23.12.2013 02:55
цикл + jquery
 
Здраствуйте, у меня есть 4 блока:
<div id="ib1"></div>
<div id="ib2"></div>
<div id="ib3"></div>
<div id="ib4"></div>

Есть скрипт, который меняет цвет заголовка при наведении на ссылку с классом mosaic-overlay
$("#ib1 .bar2 .mosaic-overlay").hover(
        function(){ $("#ib1 .bar2 .mosaic-overlay h4").addClass('h4-hover') },
        function(){ $("#ib1 .bar2 .mosaic-overlay h4").removeClass('h4-hover')}
    );

как можно это в цикл обернуть для 4х элементов?

Vlasenko Fedor 23.12.2013 04:58 
$("div[id^='ib']").hover(function(){
       $(this).addClass('h4-hover').siblings().removeClass('h4-hover');
});


или
<head>
    <style>
      div[id^=ib] {
        cursor: pointer;
        color: blue;
      }
      div[id^=ib]:hover {
        cursor: pointer;
        color: red;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div id="ib1">Текст</div>
    <div id="ib2">Текст</div>
    <div id="ib3">Текст</div>
    <div id="ib4">Текст</div>
  </body>

piraids 23.12.2013 10:11
Poznakomlus,
извините, забыл написать что обязательно надо к тегу <h4> добавлять класс, пробую так - не работает:
$("div[id^='ib'] .bar2 .mosaic-overlay").hover(function(){
       $("div[id^='ib'] .bar2 .mosaic-overlay h4").addClass('h4-hover').siblings().removeClass('h4-hover');
    });

ksa 23.12.2013 10:23
Цитата:
Сообщение от piraids
извините, забыл написать ...
Тестовый пример нормальный ты так же забыл сделать...

piraids 23.12.2013 10:23
сделал так:
$("a[id^='ib']").hover(function(){
       $(".mosaic-overlay h4").addClass('h4-hover').siblings().removeClass('h4-hover');
    });

так работает, НО - при наведении на 1 из 4х блоков класс добавляется всем

переделал немножко по другому:
$("a[id^='ib']").hover(function(){
       $("a[id^='ib'] h4").addClass('h4-hover').siblings().removeClass('h4-hover');
    });

также добавляется всем элементам класс h4-hover и не удаляется

пример структуры:
<div class="bar2 mosaic-block">
<a id="ib2" href="/" class="mosaic-overlay">
       <h4>Инфоблок>></h4>
</a>
</div>

piraids 23.12.2013 10:27
мне просто необходимо при наведении на a.mosaic-overlay чтобы у заголовка менялся цвет

ksa 23.12.2013 11:51
Цитата:
Сообщение от piraids
мне просто необходимо при наведении на a.mosaic-overlay чтобы у заголовка менялся цвет
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.mosaic-overlay:hover > h4 {
	color: red;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="bar2 mosaic-block">
	<a id="ib2" href="/" class="mosaic-overlay">
		<h4>Инфоблок>></h4>
	</a>
</div>
</body>
</html>


Часовой пояс GMT +3, время: 12:14.