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

回答

相关问题