CSS懸停選項

Question

我學習和使用css和css3約2年，但我不知道1件事，我找不到一個很好的答案或解決這個問題。

所以這裏有一個例子：

我創建一個div和這個div裏面我們有一個鏈接（它的一個按鈕）。

當我將鼠標懸停在div上時，此div將更改bg顏色，但鏈接不會因爲im上方的div而被忽略... 因此，當im在div上方時，此div和鏈接也會改變顏色或背景這是我所需要的......但如何做到這一點？我從來沒有用過這個，但現在我想我需要這個爲我的下一個工作:)）

非常感謝！

Answer 1

它非常容易使用CSS來實現：（working jsFiddle）

HTML：

<div class="container"> 
    <a class="button">some text</a> 
</div> 

CSS：

.container:hover{ 
    background-color:red; 
} 
.container:hover .button{ // selector for .button which is in a hovered .container 
    background-color:blue; 
} 

Answer 2

試試這個：

<div id="test"> 
    <a href="#">A link</a> 
</div> 

CSS：

div#test:hover { 
    background-color: red; 
} 
div#test:hover a { 
    background-color: red; 
} 

Answer 3

你問什麼是下面的CSS選擇器：

div:hover a{ 
    /* your styles here */ 
} 

Demo here

Answer 4

希望這demo link會爲你工作。

*{ 
    padding:0; 
    margin:0; 
    } 
body { 
    font:normal 12px/18px Arial, Helvetica, sans-serif; 
    color:#000; 
    padding:20px; 
    background-color:#F2F2F2; 
    } 
ul, li, ol { 
    list-style-type:none; 
    } 

.wrapper { 
    width:95%; 
    padding:10px; 
    overflow:hidden; 
    height:100%; 
    margin:0 auto; 
    border:1px solid green; 
} 
.spacer { 
    clear:both; 
    font-size:0; 
    line-height:0; 
    height:0; 
    } 
.wrapper:hover { 
    background-color:#999999; 
    cursor:pointer; 
    } 
.btmoOne { 
    width:170px; 
    margin:0 auto; 
    height:20px; 
    background-color:#FF0000; 
    padding:10px; 
    } 
.wrapper:hover .btmoOne { 
    background-color:#006600; 
    }