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

时间:2017-12-03 15:30:20

标签: javascript html css

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

我是新手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>

1 个答案:

答案 0 :(得分:1)

参见规格:

  

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

  

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