Пытаясь выяснить, как исчезнуть мой невидимый div с панели навигации

0

Я пытаюсь создать панель навигации, очень просто, понять, как это сделать, но есть что-то, что дает мне головную боль. Позвольте мне показать вам мой код, прежде чем объяснять его дальше:

HTML:

<div id="navBar">
<ul class="tiles">  
<li class="tile">
<div class="invDiv">Test</div>
</li>
</ul>
</div>

JQuery/Js:

$('.tile').mouseenter(function(){
$('.invDiv').show();
});

$('.tile').mouseout(function(){
$('.invDiv').hide();
});

Это он, по-настоящему простой. Поэтому, когда моя мышь выходит из моего первого ли и идет прямо на мой div, div исчезает. Хорошо, это из-за моей функции mouseout на.tile... Я это понимаю, но как я могу поставить условие, которое будет выглядеть следующим образом: Если мой.invDiv находится на дисплее: block, то группируйте.tile +.invDiv. Уберите исчезновение.invDiv только тогда, когда вы находитесь вне.invDiv или.tile... но даже тогда, если моя мышь находится внутри моего.invDiv, и я продолжаю мой.tile, что.invDiv исчезнет! Я знаю это о состоянии, но как его написать?!

(Надеюсь, вы все поймете меня, я не так хорош на английском! Спасибо всем.)

  • 0
    IIRC, использующий внутренние списки div, не является допустимым HTML. Кто-нибудь может это подтвердить?
  • 0
    Нет, это нормально. Ли может иметь блочные элементы как дети.
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

Насколько я понял ваш вопрос, я думаю, что это то, что вы хотите:

http://jsfiddle.net/KX76m/3/

$('.tile').mouseover(function(){
$('.invDiv').show();
});

$('.tile').mouseout(function(){
$('.invDiv').hide();
});
Поделиться
  • 0
    Я знал, что это было так просто! + Нет никакого состояния js вообще, это здорово! Спасибо!
  • 1
    Хорошо. Я знаю, что я сделал не так. Когда я попробовал это ранее этим утром, я поставил «mouseenter» вместо «mouseover» точно в качестве первой строки. Если вы введете «mouseenter», то ваш невидимый div исчезнет, даже если вы вернетесь на исходную позицию (в данном случае сначала li). Ваша третья функция теперь бесполезна!
Показать ещё 1 комментарий
0

Просто используйте функцию.toggle()

http://api.jquery.com/toggle/

$('.tile').mouseenter(function(){
    $('.invDiv').toggle();
});

$('.tile').mouseout(function(){
    $('.invDiv').toggle();
});

Лучший способ написать этот код:

$('.tile').on('mouseenter', function(){
    $('.invDiv').toggle();
});

$('.tile').on('mouseout',function(){
    $('.invDiv').toggle();
});

Таким образом, у вас нет никаких проблем, если вы измените somenthing в этом div

Поделиться
  • 0
    Я проверил это, и есть проблема. Когда ваша мышь движется внутри «.invDiv», этот Div исчезает и появляется снова постоянно. Но все равно спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню