j查询悬停问题 - 最后一个 li 元素保持悬停状态

jQuery hover issue - last li element stays hoverd

本文关键字：悬停 元素 li 状态 最后一个 查询 问题      更新时间：2023-09-26

我尝试了很多选项，但没有结果。但是，我有此代码

<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');
        }
    );
});

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

谢谢！

这样的事情怎么样...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项提供一个公共类，并使用 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');
    });
<</div> div class="answers">将其

与鼠标悬停绑定，然后使每个事件清除除鼠标悬停之外的其他新闻。

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

没有包含文档的 ready 事件：

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

这将起作用

相关文章：