Question

the html code :

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

example one

example one

my jquery code:

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

but it doesn’t work.

i want to get: when open the page. the first image is show, the rest are all hidden. when the mouse hovers on one item title in it. it shows its image. all others are hidden.

PS: i am sorry.it’s ok now. i made a mistake to the ID.but i know my jquery code is bad. is there a better way to get it

Answer 1

Specify the correct ID: top10 instead of top. Also, your first two lines can be merged using :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();
    });
});

Fiddle: http://jsfiddle.net/BfHwL/