使用onmouseover更改圖像上的文字？

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-qc-640-480-1.jpg"> </div> <div id="image2" onmouseover="change2()"> <img src="http://lorempixel.com/output/cats-qc-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/