Question

I have the following HTML code:

<div id="container">
<ul>
<li><img src="#" /></li>
<li><img src="#" /></li>
</ul>
<h2>Some Text</h2>
</div>

What I want is simply to hover one of the images in the ul and thus change the text in the h2 field. It doesn’t matter if it will be done with jQuery, javascript or css, but it should be as simple as possible.

And please explain your code with comments so I can understand it!

Thank you!

Answer 1

Ok, jquery does this easily:

//mouseover any li tag and do the following
$("img").hover(function(){
     //get the html code in teh li
     var text = $(this).attr("src");
     //put that in any or all h2 tags
     $("h2").text(text);
});


$("img").mouseout(function(){
     $("h2").html("");        
});