Question

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

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

您的代码在inside和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

您的javascript方法onchange1，onchange2未调用onmouseover事件。您可以尝试此链接

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

Answer 4

它看起来像JSfiddle网站有问题。我将js移动到HTML窗口，它工作正常。但是你的代码可以运行。

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

使用onmouseover在图像上更改文本？

4 个答案: