Hover не будет работать, когда показывать / скрывать не родительский и дочерний элемент - PullRequest
Новая
       1

Hover не будет работать, когда показывать / скрывать не родительский и дочерний элемент

0 голосов
/ 11 мая 2011

У меня есть такой код 

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
<ul>

, но я хочу, чтобы у mainlink2 было подменю, я не хочу размещать его как дочерний, потому что когда я устанавливаю подменю как абсолютноея не могу подогнать его ширину к экрану и быть в центре, поэтому я создаю div вне 'ul', как это ... 

 <div>
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

, когда я вызываю javascript. Однако я не вижуподменю.я пытаюсь добавить класс в «подменю», запоминая индекс основного меню, и когда он совпадает, я добавляю класс, чтобы показать подменю, когда не нависаю, я удаляю класс.Но функция наведения не может сделать это, когда я оставляю мышь из главного меню, подменю скрыть.

1 Ответ

0 голосов
/ 11 мая 2011

Попробуйте это:

HTML: 

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li class="mainlink2"><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
</ul>

<div class="submenu" style="position:absolute;background:#ddd; margin-left:-250px;left:50%;display:none;width:500px">
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

Jquery: 

$(function(){

    $('.mainlink2').mouseenter(function(){
        $('.submenu').show(500);
    }).mouseleave(function(){
        $('.submenu').hide(500);
    });

});
...