javascript - 如何在鼠标悬停在另一个 div 上时隐藏 div？

Question

我有这样的 HTML:

<table>

  <tr>
     <td><div class='record'>Record Link</div></td>
     <td><div class='delete' style='display:none;'>Delete Link</div></td>
  </tr>

  <tr>
     <td><div class='record'>Record Link</div></td>
     <td><div class='delete' style='display:none;'>Delete Link</div></td>
  </tr>

</table>

Delete Link 隐藏在上面的 HTML 中。我想在鼠标悬停在其相关的 record DIV

上时显示 Delete Link

在尝试了一些 prototypejs 的基础教程之后，我能够编写以下代码，它对我有用但尚未完成。

document.on('mouseover', 'div.record', function(event, element) {
    event.target.hide(); // testing: it hides the record itself
});

以下代码对我不起作用:

$('delete').setStyle({ display: 'block' });
$$('div.delete').setStyle({ display: 'block' });

Answer 1

尝试 CSS:

table#mytable tr:hover .delete{  /*identify your table for this effect, so as not to affect other tables*/         
    display:block !important;    /* !important is needed for override since */ 
}                                /* you styled "display:none" on element level */         

它的作用是从父级检测悬停在子级上(CSS 会冒泡)，然后设置主题元素的样式。