使用CSS更改嵌套元素的背景顏色a：hover

我試圖通過使用a：hover {background-color：rgb（189，2012）更改以下腳本中#box和#internalArrow元素的背景顏色。 64，132）;}構造。使用CSS更改嵌套元素的背景顏色a：hover

這就是我的;

 <style type="text/css"> 
    #box 
    {     
     background-color: rgb(217, 9, 122); 
     height: 50px; 
     width: 50px; 

     position: absolute;    
     top:50% 

    } 

    #box:after { 
     content: ' '; 
     height: 0; 
     position: absolute; 
     width: 0;   

     border: 20px solid transparent; 
     border-right-color: #ffffff; 

     top: 50%; 
     left: 10%; 
     margin-left:-15px; 
     margin-top:-20px; 
    }  

    #internalArrow 
    { 
     width:0; 
     height:0; 
     position:absolute; 

     border: 20px solid transparent; 
     border-right-color: rgb(217, 9, 122);  

     top: 50%; 
     left: 10%; 
     margin-left:-5px; 
     margin-top:-20px;  
     z-index:100;    

    } 

    #box:hover + #internalArrow 
    { 
     background-color:rgb(189, 64, 132); 
    } 

    #wrapper 
    { 
     height:600px; 
     width:50px; 
     background-color:#ffffff; 
     opacity:0.9; 
    } 

</style> 

</head> 
<body> 
<div id="wrapper"> 
<div id="box">   
    <a id="anchor" href=""><div id="internalArrow"></div></a>   
</div> 
</div> 

</body>

我用這個先前的答案On a CSS hover event, can I change another div's styling?，但它不適用於我。我曾在Chrome和Firefox上嘗試過。有任何想法嗎？謝謝。

來源

2014-04-11 Welshboy

拿出+和那應該工作 –

在你的CSS您有：

#box:hover + #internalArrow 
    { 
     background-color:rgb(189, 64, 132); 
    }

當多個CSS選擇應該由,

#box:hover, #internalArrow:hover 
    { 
     background-color:rgb(189, 64, 132); 
    }

編輯來表示：對不起，我剛纔重讀你的問題，你是在正確的軌道上改變一個元素的背景，但是你使用了+這個相鄰的兄弟組合符號。

所有你需要做的是去除「+」和做到這一點：

#box:hover #internalArrow 
     { 
      background-color:rgb(189, 64, 132); 
     }

這表示#internalArrow由#box包含的「+」只有當它遵循#box

見工作jsFiddle

來源

2014-04-11 14:43:55

對不起，仍然不適用於我。也許它與使用：after選擇器有關。不過謝謝。 – Welshboy

嘿@Welshboy我能夠得到它的工作：http://jsfiddle.net/u7tYE/3685/ 我所做的只是將選擇器更改爲'#box：hover＃internalArrow'，因爲'＃internalArrow'包含INSIDE '＃box'。看到編輯bost –

嗨瑞安，我沒有去我的網站發佈前，我已經嘗試過這些組合，但它不適合我。我會繼續嘗試。謝謝。 – Welshboy

-1

.box .internalArrow { 
    background-color: #whatever 
};

來源

2014-04-11 14:46:51 Shakesy

使用CSS更改嵌套元素的背景顏色a：hover

回答

相關問題