Changing background-color of parent element on hover

Question

Below is my html code.

        <div class="container">
            <a class="link1" href="">Link1</a>
            <a class="link2" href="">Link2</a>
            <a class="link3" href="">Link3</a>              
        </div>

Is there any selectors in CSS that when I hover mouse on Link1 or Link2, the background-color of container gets change. Since I am new & self thought that's why I have some problems.

Are you changing the background on hover over SOME links or ALL links? — Tim, Sep 04 '14 at 17:24
some link... for example... if i hover on Link1 i want the background-color of 'container' to be #e5e5e5 & when i hover on Link2 , background-color should change to #1e1e1e , same goes on. — LeCdr, Sep 04 '14 at 17:27
You'd need javascript to accomplish this. CSS doesn't let you reference parent elements. — kinakuta, Sep 04 '14 at 17:28
possible duplicate of [Change parent div to a different background when hovering over individual child divs](http://stackoverflow.com/questions/13555255/change-parent-div-to-a-different-background-when-hovering-over-individual-child) — CRABOLO, Sep 04 '14 at 17:28
i am new... i spent all my day on using jquery for this effect... but every time i fail.... well... i'll continue.. thanks all — LeCdr, Sep 04 '14 at 17:33

score 2 · Answer 1 · answered Sep 04 '14 at 17:28

CSS4 (yup) introduces the :has() psuedo-class ( http://dev.w3.org/csswg/selectors4/#relational ) however this not currently supported by any current (as of September 2014) engine or browser.

If it was supported, then the (currently proposed) syntax would be:

div.container:has(a.link1:hover) { background-image("link1.png"); }
div.container:has(a.link2:hover) { background-image("link2.png"); }
div.container:has(a.link3:hover) { background-image("link3.png"); }

Until then, you'll need to rely on Javascript, such as jQuery's similar has ( http://api.jquery.com/has/ ).

DaniP · Answer 2 · 2014-09-04T17:42:59.290

1

The Short Answer is No. There is no way to select parents or in ascending order.

The best you can do is change the HTML and use another element to fake the background of the parent.

Like this:

HTML

 <div class="container">
        <a class="link1" href="">Link1</a>
        <a class="link2" href="">Link2</a>
        <a class="link3" href="">Link3</a> 
        <div class="fake"></div>
 </div>

CSS

.fake {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:yellow;
}
.link1, .link2, .link3 {
    position:relative;
    z-index:1;
}
.link1:hover ~ .fake {
    background:#CCC;
}
.link2:hover ~ .fake {
    background:brown;
}
.link3:hover ~ .fake {
    background:orange;
}

Check This Demo http://jsfiddle.net/g7brnb9q/

About the ~ selector helps to select sibling elements, in this case any element with fake class after the links.

Chek Here more about this GO HERE

edited Sep 04 '14 at 17:42

answered Sep 04 '14 at 17:27

DaniP

37,079
8
62
71

BTW whats the use of ~ ?? – LeCdr Sep 04 '14 at 17:37
Glad to help you mate . If you need any explanation about the code let me know. @Gull check the edit – DaniP Sep 04 '14 at 17:38
@Gull, the `~` is a general sibiling selector... It targets the elements that comes after the selected one, and are on the same node level... In this case `.fake` is a sibiling to `.link1` and comes after it. – LcSalazar Sep 04 '14 at 17:41
what @LcSalazar, also worth noting is its the same as `+` but less strict. The sibling selector `+` selects the first proceeding sibling. `~` selects all proceeding siblings – im_brian_d Sep 04 '14 at 17:42
@Gull if your question is solved don't forget to mark it as finished. – DaniP Sep 04 '14 at 17:47
@Danko where is the option for marking as Finished... ? – LeCdr Sep 06 '14 at 05:07
**`+1`** very nice solution. – dashtinejad Sep 06 '14 at 05:10

score 0 · Answer 3 · answered Sep 04 '14 at 17:39

There is no parent selector on css...

If it's ok for you to have a javascript approach, you could do something like:

document.getElementsByClassName("link1")[0].onmouseover = function() {
    this.parentNode.backgroundColor = "red";
};
document.getElementsByClassName("link2")[0].onmouseover = function() {
    this.parentNode.backgroundColor = "green";
};
document.getElementsByClassName("link3")[0].onmouseover = function() {
    this.parentNode.backgroundColor = "blue";
};

Changing background-color of parent element on hover

3 Answers3