控制列表项同时在相应的div元素上徘徊

我正在使用解决方案的组合here。我在为每个链接悬停时应用背景颜色。我希望每个链接保持它的背景色，同时悬停在它悬停的相应div上。除了getValue和appliHover变量以外的所有内容。我不知道我错过了什么。这里是我正在使用的代码：控制列表项同时在相应的div元素上徘徊

<style type="text/css"> 
<!-- 
ul.main-nav-list li { display: inline; } 
ul.main-nav-list a { background: #red; } 
ul.main-nav-list a.hover, ul.main-nav-list a:hover { background: #ccc } 
div.mega-container { display: none; width: 600px; background: #ccc; } 
--> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script>$(document).ready(function() { 

     var timeout 
     var counter = 1 
     var widgetCounter = 1 

     $('ul.main-nav-list a').each(function(){ 
      $(this).attr('rel', 'mega-menu'); 
      this.rel+= counter++ 
     }); 

     $('div.mega-container').each(function(){ 
      $(this).attr('id', 'mega-menu'); 
      this.id+= widgetCounter++ 
     }); 

     $('ul.main-nav-list a.mega-list').hover(function(){ 
      clearTimeout(timeout); 
      $('.mega-container').hide().eq($(this).parent().index()).show(); 
      }, 
      function(){ 
      timeout = setTimeout(function(){ 
       $('.mega-container').hide(); 
      }, 1000); 
     }); 

     $('div.mega-container').hover(function(){ 
      clearTimeout(timeout); 
      $('.mega-container').hide(); 
      $(this).show(); 
      var getValue = $(this).attr('rel'); 
      var $appliHover = $('ul.main-nav-list a[class=' + getValue + ']'); 
     alert($appliHover); 
      }, 
      function(){ 
      timeout = setTimeout(function(){ 
       $('.mega-container').hide(); 
      }, 1000); 
     }); 



    }); 
</script> 
</head> 

<body> 

<div id="main-nav"> 
<ul class="main-nav-list"> 
    <li><a class="mega-list" href="mysite/index.html">Mega Nav 1</a></li> 
    <li><a class="mega-list" href="mysite/index.html">Mega Nav 2</a></li> 
    <li><a href="mysite/index.html">Mega Nav 3</a></li> 
    <li><a href="mysite/index.html">Mega Nav 4</a></li> 
    <li><a href="mysite/index.html">Mega Nav 5</a></li> 
</ul> 
</div> 

<div class="mega-container"> 
<h1>Mega Container 1</h1> 
<ul> 
<li><a href="mysite/index.html">Mega Container Nav</a></li> 
<li><a href="mysite/index.html">Mega Container Nav</a></li> 
</ul> 
</div> 

<div class="mega-container"> 
<h1>Mega Container 2</h1> 
<ul> 
<li><a href="mysite/index.html">Mega Container Nav</a></li> 
<li><a href="mysite/index.html">Mega Container Nav</a></li> 
</ul> 
</div> 

</body>

来源

2012-10-21 dmod40

我能弄明白这一点。这是羊驼嘴唇和乔提供的解决方案here的组合。以下是任何人都可以使用的情况下的变化：

<script>$(document).ready(function() { 

     var timeout 
     var counter = 1 
     var widgetCounter = 1 

     $('ul.main-nav-list a').each(function(){ 
      $(this).attr('rel', 'mega-menu'); 
      this.rel+= counter++ 
     }); 

     $('div.mega-container').each(function(){ 
      $(this).attr('id', 'mega-menu'); 
      this.id+= widgetCounter++ 
     }); 

     $('ul.main-nav-list a.mega-list').hover(function(){ 
      clearTimeout(timeout); 
      $('.mega-container').hide().eq($(this).parent().index()).show(); 
      if(!$(this).hasClass('hover')){ 
       $(this).addClass('hover'); 
      } 
      }, 
      function(){ 
      timeout = setTimeout(function(){ 
       $('.mega-container').hide(); 
      }, 1000); 
     }); 

     $('div.mega-container').hover(function(){ 
      clearTimeout(timeout); 
      $('.mega-container').hide(); 
      $(this).show(); 
      }, 
      function(){ 
      timeout = setTimeout(function(){ 
       $('.mega-container').hide(); 
       $('ul.main-nav-list a.mega-list').removeClass('hover'); 
      }, 1000); 
     }); 
    }); 
</script>

来源

2012-10-21 20:55:07 dmod40

控制列表项同时在相应的div元素上徘徊

回答

相关问题