我想要一个在鼠标悬停时自行改变并在鼠标移开时变回原始表格的表格。这是我能做的最好的:
<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>
但是，有时当我将鼠标移出时，里面的内容仍然没有变回原来的内容。有更好的方法吗？
谢谢!
最佳答案
嗯，你当然可以用 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>关于javascript - 在鼠标悬停时更改文本并在鼠标移开时更改回来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8860058/