Показывать див при подводе на другой див
У меня есть верстка вот такого вида:
![]() Сверстано так что все зеленые блоки имеют одинаковый класс. И подсказки рядом с ними тоже имеют одинаковые классы. Мне нужно создать jquery код чтобы: 1. Оражневые блоки не были винды при входе на сайт 2. При подводе к зеленому блоку показывать оранжевый блок и прятать его, когда мышка уходит. Пожалуйста помогите с этой задачей. Я застрял на том что так как все классы одинаковые как мне определить на какой я подвел и как понять что именно рядом стоящий следующий класс нужно отображать. Спасибо |
Пример вёрстки приведите. Иными словами покажите часть HTML с блоками.
В данный момент многое не ясно. Как зелёный и оранжевый между собой связаны. Оранжевые внутри зелёных, или наоборот, а может они рядом. А если рядом то как определить какой оранжевый при наведении на какой зелёный показывать. Но больше всего не ясно почему нельзя вёрстку подредактировать, а вместо этого писать костыль. так как задача не ясна вот набросок скрытия оранжевых от болды. способ 1) // скрываем все оранжевые дивы внутри контейнера $('#conteiner').find('div').each(function(){ if ($(this).css('color')=="orange") $(this).hide() ; }); способ 2) своять свой селектор // создаём свой селектор $.extend($.expr[':'],{ orange: function(a) { return $(a).css('color') === 'orange'; } }); // использовать так: $('div:orange').hide(); // скроет все оранжевые дивы Короче покажите HTML. |
Хотя бы HTML скинул бы... Ну а так примерно:
Как я понял у тебя html примерно такой: <div class="green"></div> <div class="orange"></div> <div class="green"></div> <div class="orange"></div> Отталкиваясь от этого получаем: CSS (прячем оранжевые блоки): .orange { display: none; } JS: $('.green').hover(function(){ $(this).next().show(); }, function(){ $(this).next().hide(); }); |
Да-да, конечно, вот он:
<div class="menu_box"> <a href="#link" class="menu_item">Домашняя утварь</a> <p class="menu_popup">Товары для дома со скидкой</p> </div> <div class="menu_box"> <a href="#link" class="menu_item">Электроника</a> <p class="menu_popup">Телевизоры, компьютеры, прочая электроника</p> </div> <div class="menu_box"> <a href="#link" class="menu_item">Мебель</a> <p class="menu_popup">Диваны, кровати, стулья</p> </div> Нужно при подводе на menu_item отображать menu_popup для текущего пункта меню. |
Цитата:
Мне нужно было использовать выбор элемента через next. Спасибо :) |
$(".munu_box").hover(function(){ $(this).find('.menu_popup').show(); },function(){ $(this).find('.menu_popup').hide(); }); Твою девизию, неуспел )))) |
Часовой пояс GMT +3, время: 00:53. |