Javascript 在鼠标悬停时更改文本并在鼠标移开时更改回
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8860058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change text on mouse over and change back on mouse out
提问by Thien
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!
谢谢！
回答by lambgrp425
Well, you could certainly do it with CSS - http://jsfiddle.net/32HpH/
好吧，你当然可以用 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>回答by remdevtec
回答by ARJUN
Well, as you specified in Question to trigger onmouseover and onmouseout event so it is better to use Javascript. Check here Fiddle
好吧，正如您在问题中指定的触发 onmouseover 和 onmouseout 事件，因此最好使用 Javascript。在这里检查小提琴
<!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>
回答by small mammal
CSS only option that prevents table columns (or other containing element) dynamically resizing due to text changing on hover. Width is always length of longest text.
仅 CSS 选项可防止表格列（或其他包含元素）由于悬停时文本更改而动态调整大小。宽度始终是最长文本的长度。
CSS2 only.
仅 CSS2。
<!doctype html>
<html lang="en">
<head>
<style>
.flip>span {
color: transparent;
float: none;
}
.flip:hover>span {
color: black;
float: left;
}
.flip>span:first-child {
color: black;
float: left;
}
.flip:hover>span:first-child {
color: transparent;
float: none;
}
</style>
</head>
<body>
<table border='1'>
<tr>
<td class="flip">
<span>normal text</span>
<span>hover text</span></td>
<td>col 2</td>
</tr>
<tr>
<td class="flip">
<span>other normal text</span>
<span>other hover text</span></td>
<td>col 2</td>
</tr>
</table>
</body>
</html>
Fiddle of above: https://jsfiddle.net/punxphil/mckbrscd/
