更改鼠標移過來的文字，並將鼠標移出鼠標

我想要一張表格，鼠標移動時會自行更改，並在鼠標移出時更改回原始。在這裏，最好的我可以這樣做：更改鼠標移過來的文字，並將鼠標移出鼠標

<html> 
<body> 
<div id="line1"> 
    <table onmouseover="showMore()" border="1"> 
     <tr> 
      <td>this is sick</td> 
     </tr> 
    </table> 
</div> 

<script> 
function showMore(){ 
    document.getElementById("line1").innerHTML = "<table border='1' onmouseout='showLess()'><tr><td>this is awesome</td></tr></table>"; 
} 

function showLess(){ 
    document.getElementById("line1").innerHTML = "<table border='1' onmouseover='showMore()'><tr><td>this is sick</td></tr></table>"; 
} 
</script> 
</body> 
</html>

但是，有時，當我移動鼠標時，裏面的仍然是內容不改回原來的。有一個更好的方法嗎？

謝謝！

來源

2012-01-14 Thien

那麼，你當然可以用CSS做 - http://jsfiddle.net/32HpH/

div#line1 span#a { 
 
    display: inline; 
 
} 
 

 
div#line1:hover span#a { 
 
    display: none; 
 
} 
 

 
div#line1 span#b { 
 
    display: none; 
 
} 
 

 
div#line1:hover span#b { 
 
    display: inline; 
 
}

<div id="line1"> 
 
    <table border="1"> 
 
    <tr> 
 
     <td> 
 
     <span id="a">this is sick</span><span id="b">this is awesome</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2012-01-14 04:35:38 mcallinder

這是偷偷摸摸的，我喜歡它 – dougmacklin 2012-09-20 01:54:13

那麼，你在提問指定的onmouseover觸發和onmouseout事件，因此最好是使用JavaScript。請在這裏Fiddle

<!DOCTYPE html> 
<head> 
<title>change text on mouse over and change back on mouse out 
</title> 
<script type="text/javascript"> 
    function changeText(text) 
     { 
      var display = document.getElementById('text-display'); 
      display.innerHTML = ""; 
      display.innerHTML = text; 
     } 
      function changeback(text) 
     { 
      var display = document.getElementById('text-display'); 
      display.innerHTML = ""; 
      display.innerHTML = text; 
     } 
    </script> 
<style> 
#box { 
float: left; 
width: 150px; 
height: 150px; 
margin-left: 20px; 
margin-top: 20px; 
padding: 15px; 
border: 5px solid black; 
} 
</style> 
</head> 
<html> 

<body> 
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" > 

<div id="text-display" > 
any thing 
</div> 

</div> 
</body> 
</html>

來源

2014-07-13 04:25:59 ARJUN

功能不好使用！兩個函數只爲一個html id做完全相同的事情。只需像'setTextOfId（text，id）{document.getElementById（id）.innerHTML = text;}'這樣的全局函數。這樣一個函數可以被重用，因爲它應該。 – Marcel 2014-09-09 13:02:45

是的Marcel，我同意，但我在這裏回答了他們用2個函數showMore（）和showLess（）詢問的問題。 – ARJUN 2014-09-11 05:14:35

ARJUN。這裏問的唯一問題是*有沒有更好的方法來做到這一點？*。他只顯示他的代碼以供參考。 – Marcel 2014-09-11 09:23:07

我會做這樣的事情：

<td 
    onmouseover="this.innerHTML='this is awsome';" 
    onmouseout="this.innerHTML='this is sick';"> 
    this is sick 
</td>

這裏有一個JSFiddle。

來源

2016-01-08 08:12:58 remdevtec

更改鼠標移過來的文字，並將鼠標移出鼠標

回答

相關問題