<分区>
标签 javascript html css
<分区>
我想隐藏页面上的一些评级文本，直到我将鼠标悬停在它上面。
我是新手 css + javascript 编码器，我在查看网页时正在测试一些 css 覆盖代码(例如使用带有 stylebot 扩展的 chrome 浏览器)，这意味着您只能修改 css。我没有找到使用 css visibility 属性执行此操作的方法，但使用 opacity 效果很好，请参见下面的代码。我找不到任何解释为什么当我将鼠标悬停在该区域上时 css visibility 不会改变的原因。只是好奇是否有人可以解释它。是否可以仅在 css 中处理visibility？
如果我通过 javascript 更改可见性，此行为是否与纯 css 相同？我在 stackoverflow.com 上看到几个问题，询问看起来类似的问题，但确实遵循了这些问题。只是好奇。
(编辑:我先尝试了display，然后尝试了visibility。我意识到空间保持可见性但悬停被禁用了？)。
<!DOCTYPE html>
<html>
<head>
<style>
div.mydiv1 {
visibility:hidden;
}
div.mydiv1:hover {
visibility:visible;
}
div.ratingValue {
opacity: 0
}
div.ratingValue:hover {
opacity:1;
}
</style>
</head>
<body>
Opacity:
<div class=ratingValue>
Opacity example
<p />
</div>
Visibility:
<div class=mydiv1>
Visibility example
</div>
</body>
</html>
最佳答案
查看规范:
visibility: hiddenThe element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they havevisibilityset tovisible. The element cannot receive focus (such as when navigating through tab indexes).
display: noneLets you turn off the display of an element; when you usenone, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
关于javascript - css 在悬停时将隐藏更改为可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47619928/