Question

我想在页面上隐藏一些评级文字，直到我盘旋它。

我是新手css + javascript编码器，我在查看网页时测试了一些css覆盖代码（例如使用带有stylebot扩展名的chrome浏览器），这意味着你只能修改css。我没有找到使用css 可见性属性执行此操作的方法，但使用不透明度工作正常，请参阅下面显示的代码。当我将鼠标悬停在该区域上时，我找不到任何可以解释为什么css 可见性不会改变的内容。只是好奇是否有人可以解释它。是否可以仅在css中使用可见性？

如果我通过javascript进行可见性更改，此行为是否与纯css相同？我在stackoverflow.com上看到了几个问题，询问类似的问题，但确实跟着他们。好奇。

（编辑：我首先尝试了显示，然后尝试了可见性。我意识到空间保持可见性但是暂停了？）。

<!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>

Answer 1

参见规格：

visibility: hidden 元素框不可见（未绘制），但仍会照常影响布局。如果visibility设置为visible，则该元素的后代将可见。元素无法获得焦点（例如在浏览选项卡索引时）。

display: none 让您关闭元素的显示;当您使用none时，所有后代元素的显示都会关闭。文档的呈现方式就好像元素不存在于文档树中一样。

css在悬停时将隐藏更改为可见

1 个答案: