Question

我试图通过使用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>

我使用了之前的回答On a CSS hover event, can I change another div's styling?，但它对我不起作用。我在Chrome和Firefox中尝试过它。有任何想法吗？感谢。

Answer 1

在你的CSS中你有：

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

当多个CSS选择器应由,

表示时

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

编辑：对不起，我只是重新阅读了您的问题，并且您正在改变元素的背景，但您使用的是+的符号，它是相邻的兄弟组合。

您需要做的就是删除＆＃39; +＆＃39;并这样做：

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

这表示#internalArrow包含#box，＆＃39; +＆＃39;仅在跟随#box

时才有效

请参阅jsFiddle

Answer 2

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

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

2 个答案: