Thi*_*ien 2 html javascript onmouseover onmouseout
我希望有一个表在鼠标移动时自行更改,并在鼠标移出时更改回原始状态.这是我能做的最好的事情:
<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>
但是,有时当我将鼠标移出时,静止内部的内容不会变回原始内容.有一个更好的方法吗？
谢谢!
mca*_*der 17
嗯,你当然可以用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>我会做这样的事情：
<td
onmouseover="this.innerHTML='this is awsome';"
onmouseout="this.innerHTML='this is sick';">
this is sick
</td>
这是一个JSFiddle。
| 归档时间： |
|
| 查看次数： |
46162 次 |
| 最近记录： |