Question

html代码：

<ul id="top10">
 <li class="test">
    <div class="first">
         <a  href="#"><img src="01.jpg"></a>
    </div>
     <div class="last">
 <a href="#">example one</a>
    </div>
</li>

 <li class="test">
    <div class="first">
         <a  href="#"><img src="01.jpg"></a>
    </div>
     <div class="last">
 <a href="#">example one</a>
    </div>
</li>

 <li class="test">
    <div class="first">
         <a  href="#"><img src="01.jpg"></a>
    </div>
     <div class="last">

例子一例如一个

我的jquery代码：

$(document).ready(function(){
    $("div.first img").hide();
    $("ul li:first img").show();
    $("#top li").hover(function(){
        $(this).find("img").show();
    });
});

但它不起作用。

我想得到：打开页面时。第一张图片显示，其余图片全部隐藏。当鼠标悬停在其中的一个项目标题上时。它显示了它的形象。所有其他人都隐藏了。

PS：对不起。现在好了。我犯了ID错误。但我知道我的jquery代码很糟糕。是否有更好的方式来获得它

Answer 1

指定正确的ID：top10而不是top。此外，您的前两行可以使用:gt(0)合并：

$(document).ready(function(){
    $("div.first:gt(0) img").hide(); //Every image after the first (index 0) img
    $("#top10 li").hover(function(){ //top 10
        $(this).find("img").show();
    });
});

小提琴：http://jsfiddle.net/BfHwL/

Answer 2

检查一下：

$(document).ready(function(){
    $("div.first img").hide();
    $("ul li:first img").show();
    $("#top10 li").hover(function(){
        $(".first img").hide();
        $(this).find("img").show();
    });
});

演示： http://jsfiddle.net/vxTRs/

当鼠标悬停在jquery上时，使img显示

2 个答案: