CSS selectors: how to make element hovering change wrapper's style

Question

Suppose we have HTML:

<div id="wrapper">

     I want this to change color when button hovered

     <div class="button">Close</div>

</div> 

We can change the element's style when the wrapper is hovered:

#wrapper:hover .button{
 color:red
}

Now want the opposite thing:

button:hover #wrapper{
 background:yellow
}

Answer 1

@dan; you can do this with css also like this:

#wrapper{position:relative;}
#wrapper:hover .button{
 color:red;
}
.button:hover:after{
    content:"";
    background:yellow;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1
}

check this example http://jsfiddle.net/sandeep/b6apC/ .It's a fake but can achieve that effect with css.

Answer 2

While, as noted, this question cannot be answered with CSS, it can be achieved with JavaScript (and without need of a library, such as jquery, mootools etc):

var b = document.getElementsByClassName('button');

for (i = 0; i < b.length; i++) {

    b[i].onmouseover = function() {
        this.parentNode.style.backgroundColor = '#f90';
    };
    b[i].onmouseout = function() {
        this.parentNode.style.backgroundColor = '#fff';
    };
}

JS Fiddle demo.

---

Edited

You can also, with CSS3, apply fading to the backgroundColor changes:

div[id^=wrapper] {
    /* other stuff */
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
}

JS Fiddle demo

Answer 3

If you don't mind an extra element for the text (which is most common anyway) then use the hackless and pure CSS1 solution from this answer which leads to this fiddle:

Markup:

<div id="wrapper"> 
    <span>I want this to change color when button hovered</span>
    <div class="button">Close</div> 
</div>  

Style sheet:

#wrapper {position: relative}
#wrapper:hover {background: yellow}
#wrapper span:hover {background: white}
#wrapper span {display: block; padding-bottom: 1em}
#wrapper .button {position: absolute; bottom: 0}

Answer 4

This cant be done via CSS im afraid, however via Jquery... Here is a solution! (Untested but theory is there)

    <script type="text/javascript">
$(document).ready(function()
{
    $(".button").hover(function()
        {
            $(this).closest("#wrapper").stop().animate({"color": "#fff"}, "medium");
        },
        function()
        {
            $(this).closest("#wrapper").stop().animate({"color": "#000"}, "fast");
        }
    );

});
</script>

Hope this helps you. The key is the "closest" bit, This searchs up the structure to find the first instance of "wrapper" and then does its jquery magic to it.

Answer 5

In general, CSS styles can only affect things further down the tree - so you cannot affect the wrapper (essentially ever).

However, you may be able to fake it: you probably don't care about whether the wrapping element changes color, but rather whether the visual circumscribing block changes color. This outer block does not necessarily need to be a wrapping element - indeed, there are several possible alternatives if you're willing to control the layout in more detail.

• You could make the "wrapper" and "button" siblings, and then use #button:hover + #wrapper
• You could have an invisible element the size of the button and include the wrapper and button within it - then declare the hover style on it.
• If you only care about a background color, make the wrapper's background transparent. Then, when on button hover unhide or generate a large colored background box with a lower z-index. (You can position this new background box either handily using top, left etc. or, in case that's impossible due to other positioning, simply make it huge and with negative margins and hide overflow in the wrapper).

This last approach is particularly attractive since it doesn't require manually positioning the button. However, it's also more limited in that in doesn't really affect the surrounding box; so you can only change the background-color and not for instance the text color. I've implemented an example here: http://jsfiddle.net/emn13/xExvC/