更改鼠标悬停时的列数答案

【问题标题】：Change number of columns on mouseover更改鼠标悬停时的列数
【发布时间】：2018-08-16 09:03:37
【问题描述】：

我试图在鼠标悬停时用一个 td 替换三个 td： Sample code in JSFiddle

<html>
  <body>
    <table border="1">
      <tr onmouseover="this.innerHTML='<td colspan=3>ABC</td>'" onmouseout="this.innerHTML='<td>A</td><td>B</td><td>C</td>'">

        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
   </table>
</body>

鼠标悬停有效，但鼠标移出被忽略。

【问题讨论】：

看起来像this was reported 18 years ago :)

标签： javascript html-table onmouseover onmouseout

【解决方案1】：

更改元素的innerHTML 后，mouseout 事件不起作用。具体原因我不知道。

您可以通过将单个单元格添加到 html 中并切换单元格的可见性来实现。

JSFiddle

【讨论】：

【解决方案2】：

试试这个吧。

<html>

  <body>
  
  <table border="1" onmouseover="this.innerHTML='<td colspan=3>ABC</td>'" onmouseout="this.innerHTML='<td>A</td><td>B</td><td>C</td>'">
    <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </table>
  
  </body>

</html>

【讨论】：

这对我来说很尴尬。仅有时有效。（铬 68.0.3440.106）