将鼠标悬停在相应的 div 元素上时控制列表项答案

【问题标题】：Control list item while hovered on corresponding div element将鼠标悬停在相应的 div 元素上时控制列表项
【发布时间】：2012-10-21 16:52:43
【问题描述】：

我正在使用here 解决方案的组合。我在悬停时为每个链接应用背景颜色。我希望每个链接在悬停在悬停时显示的相应 div 上时保持其背景颜色。除了 getValue 和 appliHover 变量之外的所有内容。我不知道我错过了什么。这是我正在使用的代码：

<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>

【问题讨论】：

标签： jquery

【解决方案1】：

我能够弄清楚这一点。这是羊驼嘴唇和乔提供的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>

【讨论】：