改变鼠标移过来的文字，然后改回鼠标 [英] change text on mouse over and change back on mouse out
问题描述
我想拥有一个表格，它可以在鼠标悬停的情况下自行更改，并在鼠标移出时更改回原始表格。在这里，我可以做的最好：
< html>
< body>
< div id =line1>
< tr>
< td>这是生病的< / td>
< / tr>
< / table>
< / div>
< script>
function showMore（）{
document.getElementById（line1）。innerHTML =< table border ='1'onmouseout ='showLess（）'>< tr>< td>这太棒了< / td>< / tr>< / table>;
}
function showLess（）{
document.getElementById（line1）。innerHTML =< table border ='1'onmouseover ='showMore（）'> ;< tr>< td>这是生病的< / 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;} < pre class =snippet-code-html lang-html prettyprint-override> < div id =line1> < table border =1> < TR> < TD> < span id =a>这是生病的< / span>< span id =b>这是很棒的< / span> < / TD> < / TR> < / table>< / div>
I want to have a table that changes itself on mouse over and changes back to the original on mouse out. Here the best I can do:
<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>
However, sometimes when I move the mouse out, the content inside the still doesn't change back to the original. Is there a better way to do this?
Thanks!
Well, you could certainly do it with 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>
这篇关于改变鼠标移过来的文字，然后改回鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
