5

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

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

但是，有时当我将鼠标移出时，里面的内容仍然没有变回原来的样子。有一个更好的方法吗？

谢谢！

4

4 回答 4

21

好吧，你当然可以用 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>

于 2012-01-14T04:35:38.840 回答
4

我会做这样的事情：

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

这是一个JSFiddle。

于 2016-01-08T08:12:58.797 回答
2

好吧，正如您在问题中指定触发 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>
于 2014-07-13T04:25:59.340 回答
1

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

于 2018-04-12T01:56:29.857 回答