Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Показывать див при подводе на другой див (https://javascript.ru/forum/jquery/21591-pokazyvat-div-pri-podvode-na-drugojj-div.html)

Manjuriano 16.09.2011 15:27

Показывать див при подводе на другой див
 
У меня есть верстка вот такого вида:


Сверстано так что все зеленые блоки имеют одинаковый класс. И подсказки рядом с ними тоже имеют одинаковые классы. Мне нужно создать jquery код чтобы:

1. Оражневые блоки не были винды при входе на сайт
2. При подводе к зеленому блоку показывать оранжевый блок и прятать его, когда мышка уходит.

Пожалуйста помогите с этой задачей. Я застрял на том что так как все классы одинаковые как мне определить на какой я подвел и как понять что именно рядом стоящий следующий класс нужно отображать. Спасибо

DjDiablo 16.09.2011 15:39

Пример вёрстки приведите. Иными словами покажите часть 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.

bayrach 16.09.2011 15:43

Хотя бы 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();
});

Manjuriano 16.09.2011 15:55

Да-да, конечно, вот он:

<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 для текущего пункта меню.

Manjuriano 16.09.2011 16:00

Цитата:

Сообщение от bayrach (Сообщение 126753)
[/html]
JS:
$('.green').hover(function(){
    $(this).next().show();
}, function(){
    $(this).next().hide();
});

Это помогло, спасибо большое!
Мне нужно было использовать выбор элемента через next. Спасибо :)

DjDiablo 16.09.2011 16:00

$(".munu_box").hover(function(){
   $(this).find('.menu_popup').show();
},function(){
   $(this).find('.menu_popup').hide();
});


Твою девизию, неуспел ))))


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