更改悬停图像上的文本答案

【问题标题】：Change text on hover image更改悬停图像上的文本
【发布时间】：2013-02-11 09:46:11
【问题描述】：

我有以下 HTML 代码：

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

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

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

谢谢！

【问题讨论】：

标签： javascript jquery css hover

【解决方案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("");        
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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 中，享受吧:)

【讨论】：