Держите UL видимым при зависании от div до UL

У меня есть пользовательский заголовок/nav, где у меня есть два элемента, которые представляют два раздела веб-сайта. Я хочу, чтобы можно было нависнуть над одним из элементов и отобразить определенное меню. Однако список меню не является дочерним элементом этого элемента. Поэтому я не могу это сделать с помощью CSS.Держите UL видимым при зависании от div до UL

Проблема, с которой я сталкиваюсь, - это когда я нависаю над элементом, показывает меню. Но я передвигаю мышь, чтобы навести курсор на меню, и, как только отойти от элемента, меню исчезает. Я попытался добавить display:block к элементам manu, используя метод .delay(), но при перемещении мыши от div осталось небольшое мерцание.

Вот мой текущий код:

// HTML

<header> 

    <a class='hoverOverOne'>Hover over me to show menu</a> 
    <a class='hoverOverTwo'>Hover over me to show menu</a> 

    <nav> 

<ul id='menuToShow-One'> 
<li>testing</li> 
<li>testing</li> 

</ul> 

<ul id='menuToShow-Two'> 
    <li>testing</li> 
    <li>testing</li> 
</ul> 

</nav> 
</header>

// JQuery

jQuery("a.hoverOverOne").hover(
     function() { 
     jQuery('#menuToShow-One').slideDown('medium').delay(500); 
     }, 
     function() { 
     jQuery('#menuToShow-One').slideUp('medium').delay(500); 
    }); 

    jQuery("a.country").hover(
     function() { 
     jQuery('#menuToShow-Two').slideDown('medium').delay(500); 
     }, 
     function() { 
     jQuery('#menuToShow-Two').slideUp('medium').delay(500); 
    });

// CSS

#menuToShow-One{ 
display:none; 
} 

#menuToShow-Two{ 
display:none; 
}

Любая помощь будет высоко ценится ,

Спасибо.

источник

2014-10-24 JDavies

Первый - опечатка в якорь ссылки, эти hrefs должны быть классы в соответствии с вашими CSS и JS. Во-вторых - вы нарисовали себя в углу здесь, можете ли вы объяснить, почему выпадающие списки не могут быть дочерними элементами наведения? –

Спасибо за ответ. Обновлены теги. Теперь они классы. Это потому, что теги находятся внутри div. Это потому, что они - Изображения. Обертка, в которой они находятся, составляет 100%. Трудно объяснить, не показывая дизайн. – JDavies

Есть способы атаковать это с помощью CSS (например, позиционированные элементы и объявления ширины). Вы можете рассмотреть публикацию всей энчилады и пересмотр архитектуры этого заголовка. –

$(function(){ 
 
\t $("a.hoverOverOne, a.hoverOverTwo").hover(function() { 
 
\t \t var menu = '#menu'+this.id; 
 
     $('.menu').not(menu).slideUp(0); 
 
     $(menu).slideDown('medium'); 
 
    }); 
 
\t $("ul.menu").mouseleave(function() { 
 
\t \t $(this).slideUp('medium'); 
 
    }); 
 
});

a.hoverOverOne{ 
 
    margin-right: 20px; 
 
} 
 
#menuToShow-One{ 
 
    display:none; 
 
} 
 
#menuToShow-Two{ 
 
    display:none; 
 
} 
 
nav{ 
 
    display:inline-block; 
 
} 
 
ul li{ 
 
    display:block; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<header> 
 
\t <a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a> 
 
\t <a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br /> 
 
\t <nav> 
 
\t \t <ul id='menuToShow-One' class="menu"> 
 
\t \t \t <li>testing menu 1</li> 
 
\t \t \t <li>testing menu 1</li> 
 
\t \t </ul> 
 
\t \t <ul id='menuToShow-Two' class="menu"> 
 
\t \t \t <li>testing menu 2</li> 
 
\t \t \t <li>testing menu 2</li> 
 
\t \t </ul> 
 
\t </nav> 
 
</header>

источник

2014-10-24 15:39:09

Это, кажется, работает очень хорошо, но я не могу применить атрибут данных, поскольку он является частью модуля imup для редактирования drupal. – JDavies

Спасибо за то, что вы обновили ответ, я извиняюсь, что это был долгий день. У меня есть доступ к тегу. Я добавил атрибут data и отлично работал. Однако, когда я выхожу из меню, он остается видимым. Можно ли скрыть его, когда вы отключаете мышь от любого из элементов? – JDavies

Что означает «любой из элементов»? –

Проверьте следующее решение. Нет необходимости в JS, чтобы управлять этим.

#hover-one:hover ~ nav ul#menuToShow-One, 
 
#hover-two:hover ~ nav ul#menuToShow-Two { 
 
    max-height: 500px; 
 
    transition: 0.2s; 
 
} 
 

 
#menuToShow-One, 
 
#menuToShow-Two { 
 
    max-height: 0; 
 
    transition: 0.2s; 
 
    transition-delay: 1s; 
 
    overflow: hidden; 
 
} 
 

 
nav:hover #menuToShow-One, 
 
nav:hover #menuToShow-Two { 
 
    max-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 

 
    <a id="hover-one" href='#hoverOverOne'>Hover over me to show menu</a> 
 
    <a id="hover-two" href='#hoverOverTwo'>Hover over me to show menu</a> 
 

 
    <nav> 
 

 
    <ul id='menuToShow-One'> 
 
     <li>testing 1</li> 
 
     <li>testing 1</li> 
 

 
    </ul> 
 

 
    <ul id='menuToShow-Two'> 
 
     <li>testing 2</li> 
 
     <li>testing 2</li> 
 
    </ul> 
 

 
    </nav> 
 
</header>

источник

2014-10-24 15:31:22

Держите UL видимым при зависании от div до UL

ответ

Смежные вопросы