显示子元素，而徘徊在元素

我不知道如何适当地写CSS来做到以下几点，我有以下的html代码：显示子元素，而徘徊在元素

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

当我将鼠标悬停在1班，我想改变的Class2的不透明度到1.我该怎么做？谢谢！

来源

2013-11-24 Michael

首先取下内联风格和创造class2的CSS规则。然后在悬停在class1上时更改不透明度。

.class2 { 
    opacity: 0; 
} 

.class1:hover .class2 { 
    opacity: 1 
}

http://jsfiddle.net/zC8Wc/

编辑

内联样式已被删除，因为你不能在不使用!important规则，你绝对应该尽量避免在你的CSS覆盖它们。所有样式也应该放在样式表中，而不是放在HTML中。

来源

2013-11-24 00:31:41

Upvoted使用简单的CSS，并至少说明删除内联样式的要求。虽然你，*也*，不解释*为什么*它应该被删除。 –

在CSS：

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

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

来源

2013-11-24 00:31:09 Markasoftware

这是行不通的，因为写的，因为在线风格子元素将其他压倒一切，因为你清楚地了解，因为在您的演示，你使用'！important'，但你在这里省略了它）。你应该解释为什么'！重要'是必要的，它是如何避免的（在可能的情况下应该避免*真正*）。 –

在jsfiddle我有'！重要的'，但是，在生产中您需要修复 – Markasoftware

是的;正如我在之前的评论中明确指出的那样。问题是你没有提供*为什么*的解释，而你没有在这里*在你的答案*中。 –

使用的知名度，而不是

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

来源

2013-11-24 00:34:17 ProllyGeek

你意识到这是行不通的，对吧？并且它不起作用的原因是因为'nodeList'没有'style'属性（你必须逐个遍历返回的'nodeList'中的元素来单独调整'style'）。 –

是的，你是对的，对不起，我没有注意到第二个div是一个孩子，无论如何让我解决这个问题。 – ProllyGeek

现在它的作品！ – ProllyGeek

显示子元素，而徘徊在元素

回答

相关问题