在鼠标悬停时更改文本并在鼠标移出时更改回答案

【问题标题】：change text on mouse over and change back on mouse out在鼠标悬停时更改文本并在鼠标移出时更改回
【发布时间】：2012-02-10 05:11:44
【问题描述】：

我想要一个在鼠标悬停时改变自身并在鼠标移出时变回原来的表格。这是我能做的最好的：

<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>

但是，有时当我将鼠标移出时，仍然不会变回原来的内容。有没有更好的方法来做到这一点？

谢谢！

【问题讨论】：

标签： javascript html onmouseover onmouseout

【解决方案1】：

嗯，你当然可以使用 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>

【讨论】：

如何使用内联 css 做到这一点。我正在尝试使用 React 来完成此操作：/

【解决方案2】：

我会这样做：

<td 
   onmouseover="this.innerHTML='this is awsome';"
   onmouseout="this.innerHTML='this is sick';">
   this is sick
</td>

这是JSFiddle。

【讨论】：

【解决方案3】：

好吧，正如您在问题中指定触发 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>

【讨论】：

函数使用不当！！两个函数仅对一个 html id 执行完全相同的操作。只需创建一个像setTextOfId(text, id){document.getElementById(id).innerHTML = text;} 这样的全局函数。这样一个函数就可以被重用。
是的 Marcel，我同意，但我在这里回答了他们用 2 个函数 showMore() 和 showLess() 提出的问题。
阿俊。这里提出的唯一问题是有更好的方法吗？。他只显示他的代码以供参考。

【解决方案4】：

仅 CSS 选项可防止表格列（或其他包含元素）由于悬停时文本更改而动态调整大小。宽度始终是最长文本的长度。

仅限 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>

上面的小提琴：https://jsfiddle.net/punxphil/mckbrscd/

【讨论】：