我有这样的 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' });
最佳答案
尝试 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 会冒泡),然后设置主题元素的样式。
关于javascript - 如何在鼠标悬停在另一个 div 上时隐藏 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9630536/