当用javascript悬停另一个元素时,我需要在表格中显示一个元素

巴勃罗
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table</title>
  <style>
  table, th, td {
    border: 1px solid black;
    }
    </style>
</head>
<body>
    <table>
      <tr>
        <th>Short Name</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>N1</td>
      </tr>
      <tr>
        <td>N2</td>
      </tr>
      <tr>
        <td>N3</td>
      </tr>
      <tr>
        <td>N4</td>
      </tr>
    </table>
</body>
</html>

例如,当我将鼠标悬停在第一行中时,第二行在N1旁边显示NAME1。我不能使用jquery或CSS,只能使用javascript。我需要按1而不是整个表格的方式进行这项工作,因此,如果鼠标位于N1上,然后将其移至N2,则会消失NAME1并显示NAME2。我不知道用html或javascript控制第二行是否更好,用HTML生成第二行或使用javascript生成更好。另外,当鼠标没有在第一行中徘徊时,第二行必须清除。

克罗诺克里

为此,您不需要JS。这将是漫长而混乱的。这是一个非常简单的CSS解决方案:

table, th, td { border: 1px solid black; }
td:last-child{visibility:hidden;}
tr:hover td:last-child{visibility:visible;}

http://jsfiddle.net/wsrp8rky/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

悬停一个伪元素时,使另一个伪元素出现?

悬停另一个元素(ReactJS)时如何更改一个元素的样式?

悬停在另一个元素上时如何更改元素的CSS元素

如何显示阻止一个元素并在另一个div中显示?

悬停元素时,使另一个元素出现

将鼠标悬停在另一个元素上时删除<div>元素

当悬停在另一个<li>上时,如何阻止我的<li>元素移动?

需要在另一个div悬停时将类添加到div

当一个元素悬停并影响CSS中的另一个元素/类时,如何添加悬停效果?

jQuery-悬停另一个元素时需要切换一个元素

当将另一个元素悬停在元素上时,如何更改:hover状态?

在显示另一个元素时隐藏一个元素?

一个元素中的onclick在javascript中显示另一个元素

在输入悬停时选择另一个元素

使用CSS单击另一个元素时如何显示一个元素?

当用户将鼠标悬停在另一个元素上时,无法显示弹出窗口元素

悬停时,更改不近的另一个元素

当另一个元素悬停时显示div元素

sass:悬停另一个div时影响另一个元素

将一个元素悬停在另一个元素上时更改其CSS

如何在元素悬停时为另一个元素设置动画?

试图让 div 元素在悬停另一个元素时移动

当另一个元素纯粹悬停在 css 中时,如何更改一个元素的样式属性?

如何在悬停另一个元素时更改一个元素的颜色?

在 JavaScript 中在另一个元素之后选择一个元素

如何在另一个元素悬停时更改多个元素 css?

当另一个元素超出视口时显示一个元素

当我将父子元素悬停到另一个父子元素时,CSS问题如何应用更改?

当另一个元素悬停在元素上时更改元素中的文本