使用cssa:hover更改嵌套元素的背景色_Css

使用cssa:hover更改嵌套元素的背景色

css

使用cssa:hover更改嵌套元素的背景色,css,Css,我试图通过使用a:hover{background color:rgb（189，64，132）；}构造来更改以下脚本中#box和#internalArrow元素的背景色这就是我所拥有的 <style type="text/css"> #box { background-color: rgb(217, 9, 122); height: 50px; width: 50p

我试图通过使用a:hover{background color:rgb（189，64，132）；}构造来更改以下脚本中#box和#internalArrow元素的背景色

这就是我所拥有的

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


#盒子
{                  
背景色：rgb（217,9122）；
高度：50px；
宽度：50px；
位置：绝对位置；
最高：50%
}
#盒子：之后{
内容：''；
身高：0；
位置：绝对位置；
宽度：0；
边框：20px实心透明；
右边框颜色：#ffffff；
最高：50%；
左：10%；
左边距：-15px；
利润上限：-20px；
}      
#内箭头
{
宽度：0；
身高：0；
位置：绝对位置；
边框：20px实心透明；
右边框颜色：rgb（217,9122）；
最高：50%；
左：10%；
左边距：-5px；
利润上限：-20px；
z指数：100；
}
#框：悬停+箭头
{
背景色：rgb（18964132）；
}
#包装纸
{
高度：600px；
宽度：50px；
背景色：#ffffff；
不透明度：0.9；
}

我使用了前面的答案，但它对我不起作用。我已经在Chrome和Firefox上试用过了。有什么想法吗？谢谢。

在您的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

请参见

取出+，这应该会起作用，但对我来说仍然不起作用。也许这与使用：after选择器有关。谢谢。嘿@Welshboy我能让它工作了：我所做的就是把选择器改成

\box:hover#internalArrow

，因为

\internalArrow

包含在

\box

中。看到编辑博西瑞安，我确实去了那个网站之前，我发布，我已经尝试了这些组合，但它不适合我。我会继续努力的。谢谢，是的。我也试过，但没有达到要求的效果。显然，我也必须使用：after选择器。谢谢你的帮助。

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