更改鼠标移过来的文字，并将鼠标移出鼠标

我想要一张表格，鼠标移动时会自行更改，并在鼠标移出时更改回原始。在这里，最好的我可以这样做：更改鼠标移过来的文字，并将鼠标移出鼠标

<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

更改鼠标移过来的文字，并将鼠标移出鼠标

回答

相关问题