2016-03-02 165 views
-3

變化的文本標籤的文本爲「手」指針變成手時,懸停在包裝盒上,然後將文本更改回「箭頭」 ......這裏是我的代碼更改標籤

<html> 
 
<style> 
 
    #box:hover { 
 
    background-color: red; 
 
    } 
 
    #box { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid; 
 
    background-color: black; 
 
    } 
 
</style> 
 

 
<body> 
 
    <div id="box" onmouseover="myFunction()"></div> 
 
    <label id="lab">arrow</label> 
 
</body> 
 

 
<script> 
 
    function myFunction() { 
 
    document.getElementById("lab").innerHTML = "hand"; 
 
    document.getElementById("box").style.cursor = "pointer" 
 
    } 
 
</script> 
 

 
</html>

回答

2

您可以添加onmouseout來觸發鼠標移開功能。

#box:hover { 
 
    background-color: red; 
 
} 
 
#box { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid; 
 
    background-color: black; 
 
}
<div id="box" onmouseover="myFunction(true)" onmouseout="myFunction(false)"></div> 
 
<label id="lab">arrow</label> 
 
<script> 
 
    function myFunction(over) { 
 
    if (over) { 
 
     document.getElementById("lab").innerHTML = "hand"; 
 
     document.getElementById("box").style.cursor = "pointer" 
 
    } else { 
 
     document.getElementById("lab").innerHTML = "arrow"; 
 
    } 
 
    } 
 
</script>