Changing background color on nested element using CSS a:hover

Question

I am trying to change the background color of both the #box and #internalArrow elements in the following script by using the a:hover {background-color: rgb(189, 64, 132);} construct.

This is what I have;

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

I used this previous answer On a CSS hover event, can I change another div's styling? but it doesn't work for me. I have tried it in Chrome and Firefox. Any ideas? Thanks.

Take out the + and that should work – James King Apr 11 '14 at 14:42 — James King, Apr 11 '14 at 14:42

Ian Ryan Clarke · Answer 1 · 2014-04-11T15:01:14.070

2

In your css you have:

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

When multiple CSS Selectors should be denoted by a ,

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

EDIT: Sorry I just reread your question and you were on the right track for changing an element's background, but you used the notation of + which is the adjacent sibling combinator.

All you need to do is remove the '+' and do this:

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

This denotes that #internalArrow is contained by #box, the '+' only works if it FOLLOWS #box

See jsFiddle

edited Apr 11 '14 at 15:01

answered Apr 11 '14 at 14:43

Ian Ryan Clarke

268
1
8

Sorry, still doesn't work for me. Maybe it has something to do with using the :after selector. Thanks though. – Welshboy Apr 11 '14 at 14:54
Hey @Welshboy I was able to get it working: http://jsfiddle.net/u7tYE/3685/ All I did was changed the selector to `#box:hover #internalArrow` because `#internalArrow` is contained INSIDE `#box`. See edited bost – Ian Ryan Clarke Apr 11 '14 at 14:59
Hi Ryan, I did go to that site before I posted and I have tried those combinations but it doesn't work for me. I'll keep on trying. Thanks. – Welshboy Apr 11 '14 at 15:04
Yep. I've tried that aswell but doesn't give the required effect. Obviously I have to do something with the :after selector aswell. Thanks for the help. – Welshboy Apr 11 '14 at 15:08

score -1 · Answer 2 · edited Apr 11 '14 at 15:06

-1

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

edited Apr 11 '14 at 15:06

Uyghur Lives Matter

18,820
42
108
144

answered Apr 11 '14 at 14:46

Shakesy

335
2
8

Changing background color on nested element using CSS a:hover

2 Answers2