javascript - jQuery 悬停问题 - 最后一个 li 元素保持悬停

Question

我尝试了很多选择，但没有结果。但是，我有这段代码

<ul class="left_nav">
    <li class="left_nav1"><a href="#">opt1</a></li><li class="left_nav2">
    <a href="#">opt1</a></li><li class="left_nav3">
    <a href="#">opt1</a></li><li class="left_nav4">
    <a href="#">opt1</a></li><li class="left_nav5">
    <a href="#">opt1</a></li>
</ul>

这些带有图像的 div

<div id="news1" class="news">
    <a href="#" target="_blank"><img src="img/news/news1.jpg" width="340" height="255" alt="" title="" /></a>
</div>
<div id="news2" class="news">
    <a href="#" target="_blank"><img src="img/news/news2.jpg" width="340" height="289" alt="" title="" /></a>
</div>
<div id="news3" class="news">
    <a href="#" target="_blank"><img src="img/news/news3.jpg" width="340" height="232" alt="" title="" /></a>
</div>
<div id="news4" class="news">
    <a href="#" target="_blank"><img src="img/news/news4.jpg" width="340" height="250" alt="" title="" /></a>
</div>
<div id="news5" class="news">
    <a href="#" target="_blank"><img src="img/news/news5.jpg" width="340" height="226" alt="" title="" /></a>
</div>

现在class="news"默认为display: none; 。有了这个 jQuery

$(function() {
    $("ul.left_nav li").hover( function() {
            index = $("ul.left_nav li").index(this) + 1;
            $('#news' + index).addClass('active');
        }, function() {
            $('#news' + index).removeClass('active');
        }
    );
});

通过添加类 active，div 会在悬停时出现定义为display: block; 。当鼠标位于 <ul> 上时，我想再次删除此类菜单。但如果鼠标离开菜单，则最后悬停<li>保持悬停状态，带有图像的 div 也将保持可见。我怎样才能意识到这一点？

谢谢!​

Answer 1

像这样的怎么样... http://jsfiddle.net/HcjLW/1/

您需要为悬停的 div 提供某种唯一的 id，以便我们可以将其转换为带有图像的 div 的 id(或索引)。

使用 ID 而不是类的 HTML

    <ul class="left_nav">
        <li id="left_nav1"><a href="#">opt1</a></li>
        ...
    </ul>

JS

    $("ul.left_nav li").hover( function () {
        $('#news'+  $(this).attr('id').replace('left_nav','')).addClass('active');
    }, function () {
        $('#news'+  $(this).attr('id').replace('left_nav','')).removeClass('active');
    });

<小时/>

清洁解决方案

<小时/>

更好的想法是为所有 left_nav 项目提供一个公共(public)类，并使用 data-XXXX 属性分配索引 (data-index)。

http://jsfiddle.net/HcjLW/3/

HTML

<ul class="left_nav">
    <li class="left_nav_item" data-index="1"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="2"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="3"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="4"><a href="#">opt1</a></li>
    <li class="left_nav_item" data-index="5"><a href="#">opt1</a></li>
</ul>

JS

    $(".left_nav_item").hover( function () {
        $('#news'+  $(this).data('index')).addClass('active');
    }, function () {
        $('#news'+  $(this).data('index')).removeClass('active');
    });