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

我不知道如何適當地寫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

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

回答

相關問題