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

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

谢谢！

Answer 1

这样的事情...... http://jsfiddle.net/HcjLW/1/

你想给悬停的div赋予某种独特的id，这样我们就可以将它转换为带有图像的div的id（或索引）。

HTML使用ID代替类

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

Answer 2

用鼠标悬停绑定它，然后让每个事件清除其他新闻，但是鼠标移除了。

$("ul.left_nav li").mouseover( function () {

     index = $("ul.left_nav li").index(this)+1;

     $('.news').removeClass('active');

     $('#news'+index).addClass('active');

});

Answer 3

您没有包含文档的就绪事件：

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

这将起作用

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

3 个答案: