javascript - 更改悬停图像上的文本

Question

我有以下 HTML 代码：

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

我想要的只是将其中一个图像悬停在 ul 中，从而更改 h2 字段中的文本。使用 jQuery、javascript 或 css 来完成并不重要，但应该尽可能简单。

请用注释解释您的代码，以便我理解！

谢谢！

Answer 1

好的，jquery 很容易做到这一点：

//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("");        
});

Answer 2

您可以使用hover()jQuery 中的函数来检测用户何时将鼠标悬停在img：

$('ul li img').hover(function() {
   $('h2').text('Some more text'); // set whatever text you want here
});

jsFiddle：http: //jsfiddle.net/ZLtqQ/

Answer 3

我认为这可以解决您的问题。

$("#container").find("img").each(function(){  //look for each img inside the #container div
  $(this).mouseover(function(){ // and when the mouse is over it
     $("h2").html($(this).attr("src")); // put the img source as h2 text
  })
})

提示：在 h2 上放一个 id，以便脚本将值放在您想要的 h2 中，享受 :)