javascript - 在图像上使用鼠标悬停更改文本？

Question

我希望文本根据用户悬停在哪个图像上而改变。我以为我的想法是正确的，但代码不起作用。

http://jsfiddle.net/6V2TL/

HTML

<p id="test">
some text 1
</p>
<div id="image1" onmouseover="change1()">
    <img src="http://www.helpinghomelesscats.com/images/cat1.jpg">
</div>
<div id="image2" onmouseover="change2()">
    <img src="http://cvcl.mit.edu/hybrid/cat2.jpg">
</div>

JS

function change1() {
     document.getElementById("test").innerHTML = "this is a cute cat";   
}
function change2() {
     document.getElementById("test").innerHTML = "this is a cuter cat";   
}    ​

谢谢

Answer 1

您的代码在内部和 onLoad 处理程序中，无法从页面运行。左侧的第一个下拉菜单对此进行了更改，请从列表中选择“no wrap (head)”。

演示：http: //jsfiddle.net/SO_AMK/35s4C/

function change1() {
  document.getElementById("test").innerHTML = "this is a cute cat";
}

function change2() {
  document.getElementById("test").innerHTML = "this is an angry cat";
}

<p id="test">
  some text 1
</p>

<div id="image1" onmouseover="change1()">

  <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg">

</div>

<div id="image2" onmouseover="change2()">
  <img src="http://lorempixel.com/output/cats-q-c-640-480-2.jpg">
</div>

Answer 2

如果您查看控制台，您会看到您的控制台在悬停时抛出关于找不到功能的错误。

默认情况下，JFiddle 在页面加载特殊处理程序后加载 Javascript 框中的代码，您希望更改它以将代码置于非包装形式中，因此当正文悬停发生时，函数实际上是全局存在的，因此它们可以访问：http: //jsfiddle.net/6V2TL/3/

它位于工具栏左侧的选项中。

Answer 3

它看起来的 JSfiddle 站点有问题。我将 js 移到 HTML 窗口，它工作。但是您的代码有效。

http://jsfiddle.net/6V2TL/9/

Answer 4

您的 javascript 方法onchange1，onchange2没有调用 onmouseover 事件。你可以试试这个链接

http://jsfiddle.net/6V2TL/5/。