CSS/JS Solution: On hover of child element, change parent div

Question

I know CSS is "cascading", but in this case I want the effect to ascend. I'm open for either a JS or CSS solution, but honestly I'd prefer the solution with the least amount of code or overhead.

When I hover over a (child) letter, I want the entire background color to change for the ENTIRE WINDOW, not just the child element. Each letter is contained within the parent #word div which fills the whole window (or body).

It would be nice if something like the below existed in css:

#h:hover #word{
    background-color: rgba(0, 102, 0, .5);
}

But it's not working. Anyone have any ideas??

HTML:

<div id="word">
    <h1><a id="h" class= "letter" href=#>H</a></h1>
    <h1><a class= "letter" href=#>E</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>L</a></h1>
    <h1><a class= "letter" href=#>O</a></h1>
</div>

CSS:

    body {
        /*font-family: 'Sigmar One', cursive;*/
        font-family: 'Chango', cursive;
        font-size: 115px;
        color: white;
        text-shadow: 5px 5px 5px #000;
        /* background-color: #0047b2 */
        width: 100%;
        height: 100%;
        margin: 0px;
        background: url(img/texture.png) repeat; 

    }

    #word {
        position:absolute; 
        height:100%; 
        width: 70%;
        display: table;
        padding: 0 15% 0 15%;
        background: rgba(0, 71, 178, .5);
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        height: 1em;

    }

    a {
        /*border: 1px solid black;*/
        display: inline-block;
        line-height: 100%;
        overflow: hidden;

    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
        /*color: #E8E8E8;*/

    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;

    }

    a:hover {
        text-shadow: 5px 5px 5px #000;
        color: white;
    }

    #h:hover #word{
        background-color: rgba(0, 102, 0, .5);
    }

    @media (max-width: 1330px){
        #word {
            width: 100%;
            padding: 0px;

        }
    }

Fiddle: http://jsfiddle.net/SZ9ku/1/

What about this: http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element — davidaam, Sep 01 '13 at 21:07

ced-b · Accepted Answer · 2013-09-01T21:19:46.753

1

The solution would probably be JS:

$(".letter").hover(function() {
    $(this).closest("#word").toggleClass("hovered")
});

Here is a fiddle: http://jsfiddle.net/zT9AS/2

edited Sep 01 '13 at 21:19

answered Sep 01 '13 at 21:05

ced-b

3,957
1
27
39

I noticed you took out the rest of my CSS in your fiddle. I tried this JS out, but it doesn't seem to work. Something makes me think another CSS rule is messing things up for me. – neuquen Sep 01 '13 at 21:12
Alright, try this out: http://jsfiddle.net/zT9AS/2/ this is with your css. The problem was a I had to change my `.hovered` to `#word.hovered` and under `#word` I changed `background` to `background-color` as the former takes priority otherwise. – ced-b Sep 01 '13 at 21:17
Yeah, this is the best solution. It allows me to write one line of JS code (albeit, JQuery code...) and then leave the styling up to CSS. Thanks! – neuquen Sep 01 '13 at 22:07

score 0 · Answer 2 · answered Sep 01 '13 at 21:08

0

True;

#word #h:hover {
    background-color: rgba(0, 102, 0, .5); 
}

False;

#h:hover #word{
    background-color: rgba(0, 102, 0, .5);
}

answered Sep 01 '13 at 21:08

bykrkc

13
1
4

I want the effect that false gives, not the effect that true gives. The first will only change the background color of that specific element. I need the entire window to change color. – neuquen Sep 01 '13 at 21:11

score 0 · Answer 3 · answered Sep 01 '13 at 21:24

A without jquery solution:

onload = function()
{
  var links = document.getElementsByTagName('a');
  for (var i = 0; i < links.length; ++i)
  {
    if (links[i].className == 'letter')
    {
      links[i].onmouseover = function() {
        document.getElementById('word').style.backgroundColor="#0000FF";
      };
      links[i].onmouseout = function() {
        document.getElementById('word').style.backgroundColor="#FFFFFF";
      };
    }
  }
}

score 0 · Answer 4 · answered Sep 01 '13 at 21:46

It can be done in pure JS, no jQuery (I assume you don't want that since it wouldn't be that light in code), this is the best I could came out with:

var word = document.getElementsByClassName("letter");
for (i=0; i<word.length; i++) {
  word[i].addEventListener("mouseenter", function( event ) {
    parent = event.target.parentNode.parentNode;
    //whenever the mouse hovers over a letter this will be evaluated once 
    parent.style.backgroundColor = "green";
  });
  word[i].addEventListener("mouseout", function( event ) {
    parent = event.target.parentNode.parentNode;
    //whenever the mouse hovers over a letter this will be evaluated once 
    parent.style.backgroundColor = "";
  });
}

Try it in this fiddle: http://jsfiddle.net/SZ9ku/17/

Xotic750 · Answer 5 · 2013-09-01T22:45:36.197

In POJS, add the following

CSS

.wordBg {
    background: rgba(0, 102, 0, .5) !important;
}

Javascript

var changeWordBg = (function (word) {
    return function (evt) {
        if (evt.target.classList.contains("letter")) {
            switch (evt.type) {
                case "mouseover":
                    word.classList.add("wordBg");
                    break;
                case "mouseout":
                    word.classList.remove("wordBg");
                    break;
                default:
            }
        }
    };
}(document.getElementById("word")));

document.body.addEventListener("mouseover", changeWordBg, false);
document.body.addEventListener("mouseout", changeWordBg, false);

On jsfiddle

CSS/JS Solution: On hover of child element, change parent div

5 Answers5

Linked