Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2013, 00:55
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

цикл + 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х элементов?
Ответить с цитированием
  #2 (permalink)  
Старый 23.12.2013, 02:58
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,452

$("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>

Последний раз редактировалось Vlasenko Fedor, 23.12.2013 в 03:16.
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2013, 08:11
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

Poznakomlus,
извините, забыл написать что обязательно надо к тегу <h4> добавлять класс, пробую так - не работает:
$("div[id^='ib'] .bar2 .mosaic-overlay").hover(function(){
       $("div[id^='ib'] .bar2 .mosaic-overlay h4").addClass('h4-hover').siblings().removeClass('h4-hover');
    });
Ответить с цитированием
  #4 (permalink)  
Старый 23.12.2013, 08:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,879

Сообщение от piraids
извините, забыл написать ...
Тестовый пример нормальный ты так же забыл сделать...
Ответить с цитированием
  #5 (permalink)  
Старый 23.12.2013, 08:23
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

сделал так:
$("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>
Ответить с цитированием
  #6 (permalink)  
Старый 23.12.2013, 08:27
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

мне просто необходимо при наведении на a.mosaic-overlay чтобы у заголовка менялся цвет
Ответить с цитированием
  #7 (permalink)  
Старый 23.12.2013, 09:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,879

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Цикл завешивает страницу, помогите Romingood jQuery 5 19.10.2013 13:30
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 22:18
Вопрос поддержки старых методов jQuery antonM jQuery 1 03.10.2012 23:08
Цикл while jquery функции viktorolivier Events/DOM/Window 1 11.03.2012 11:24
Цикл while + немного jquery Tonik a.k.a Mademax Events/DOM/Window 11 19.10.2011 00:35