Показывать див при подводе на другой див
У меня есть верстка вот такого вида:
![]() Сверстано так что все зеленые блоки имеют одинаковый класс. И подсказки рядом с ними тоже имеют одинаковые классы. Мне нужно создать 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, время: 03:22. |