Question

我想知道如何正确编写css以执行以下操作，我有以下HTML代码：

<div class="class1">
   Hello
   <div style="opacity:0" class="class2">
      World
   </div>
</div>

当我将鼠标悬停在第1级时，我想将class2的不透明度更改为1.我该怎么做？谢谢！

Answer 1

首先删除内联样式并为class2创建一个css规则。然后将鼠标悬停在class1上时更改不透明度。

.class2 {
    opacity: 0;
}

.class1:hover .class2 {
    opacity: 1
}

http://jsfiddle.net/zC8Wc/

修改

内联样式已被删除，因为您不能在不使用{} {}}规则的情况下在CSS中覆盖它们，您应该尽量避免使用该规则。此外，您的所有样式都应该放在不在HTML中的样式表中。

Answer 2

在css中：

.class1:hover .class2{
    opacity:1;
}

jsfiddle：http://jsfiddle.net/markasoftware/BD66q/

Answer 3

使用可见性

<div class="class1" onmouseover="show_div()">Hello

<div style="visibility:hidden;" class="class2">
 World

</div>
</div>

<script>
function show_div()
{
document.getElementsByClassName("class2")[0].style.visibility="visible"

}
</script>

将鼠标悬停在元素上时显示子元素

3 个答案: