Форум

piraids · #1 (**permalink**) 23.12.2013, 02:55

Здраствуйте, у меня есть 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 · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 23.12.2013, 10:23

Сообщение от piraids

извините, забыл написать ...

Тестовый пример нормальный ты так же забыл сделать...

piraids · #5 (**permalink**) 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 · #6 (**permalink**) 23.12.2013, 10:27

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

ksa · #7 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript