Changing the color property of a child element when hovering on a different parent div's child element

Question

I'm trying to create an effect wherein an H1 element nested in a separate container div, will change it's color to red for example, when hovering over a child element of a different container div, say for example a nav button.

Here's the code. I want to change the color of TITLE PAGE to red when the About button is hovered:

<div class="main">`
   <div class="navbar">
      <nav>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Pictures</a></li>
         </ul>
       </nav>
    </div>

    <div class="logo">
       <h1>TITLE PAGE</h1>
    </div>
</div>

How do I do this? Thanks in advance!

Unfortunately, there's not a "parent" selector in CSS, but it has been discussed in a [number](https://css-tricks.com/parent-selectors-in-css/) of [places](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). Other than with JS, i dont think the current HTML you have is going to allow you to get what you're after. If there was a parent selector you might do something like `.navbar nav ul li a:hover < .main .logo h1{ color:red; }` but that would be super non-performant — haxxxton, Jan 31 '17 at 03:40
Sigh. I guess I'm off to learn Javascript then. Thank you very much for this revelation. — Denz, Jan 31 '17 at 04:48
If you're just diving in you could quite quickly solve this with some jQuery. If you like i can provide you a jQuery solution — haxxxton, Jan 31 '17 at 04:51

score 0 · Accepted Answer · answered Jan 31 '17 at 05:35

NOTE: THIS IS NOT A CSS SOLUTION

Based off the comments on the question, the following is a jQuery solution to the problem.

I like to set up my JS files like this as a standard. It leaves you with a file that is encapsulated (all variables other than those injected stay in scope) using a technique called Immediately Invoked Function Expression (IIFE) See this article for a great description, and internally all your jQuery based logic is wrapped in a jQuery ready function.

Given you're just starting with JS, I've added comments on most lines so you have an idea about what I'm doing and why. In essence, we lookup and store the elements that are going to be involved in the hover (the navbar links and the h1), and then leverage the jQuery .hover() function to add and remove a class that has some styles attributed to it.

JS

// IIFE
;(function($, window, document, undefined) {
    var $els = []; // used to store our jQuery objects
    var data = {}; // used to store non-jQuery objects

    // jQuery ready function
    $(function() {
        // create a function that will "kick-off" the logic on the page
        initialise();
        // use return to keep all functions below as only being executed if called within another function
        return;

        // kick off our logic
        function initialise() {
            populateElementCache();
            attachNavbarLinkHover();
        }

        // populates our $els cache with jQuery elements returned from a DOM search
        // it is far more performant to search the DOM anytime you update your structure than to continually query for elements everytime you want to use them. 
        function populateElementCache(){
            // im being overly specific in the DOM element look up, if you had more specific classes to your navbar links you could use them instead of this long traversal
            $els.navbarLinks = $('.main .navbar nav ul li a');
            // technically there should only be 1 `h1` tag on the page, but again we'll traverse for specificity
            $els.logoH1 = $('.main .logo h1');
        }

        // attach the jQuery `.hover`[http://api.jquery.com/hover/] function to our navbarLinks
        function attachNavbarLinkHover(){
            $els.navbarLinks.hover(
                // first function is for mouseentering the element
                function(){
                    // add a class to our logoH1 element
                    $els.logoH1.addClass('red-text');
                },
                // second function is for mouseleaving the element
                function(){
                    // remove a class to our logoH1 element
                    $els.logoH1.removeClass('red-text');
                }
            )
        }

    });

})(jQuery, window, document);

CSS

.red-text{
    color:red;
}

/*
    Below is basic styling just to show where is "hoverable" on the links
*/
.main .navbar nav ul li a{
    display:inline-block;
    padding:10px;
    background-color:#CCC;
    margin:10px;
}

You can test it out here

JSFIDDLE

Lex · Answer 2 · 2017-01-31T06:21:56.747

Currently, you'll need Javascript to do this, as "TITLE PAGE" header element is not a child element of the "About" button element.

With Javascript (ES5):

1: Add Classes to both the "About" button and the "TITLE PAGE" header to more easily reference the elements.

button

<li><a href="#" class='about button'>About</a></li>

header

<h1 class='about title'>TITLE PAGE</h1>

2: Create two functions to invoke for when the cursor hovers and leaves the "About" button (fired in event listener).

These variables reference the "About" button and the "TITLE PAGE" header.

var aboutButton = document.getElementsByClassName('about button')[0];
var aboutTitle = document.getElementsByClassName('about title')[0];

This function adds class "active" to the "About" title.

function aboutHover(){
  aboutTitle.classList.add('active');
}

This function removes class "active" from the "About" header element.

function aboutLeave(){
  aboutTitle.classList.remove('active');
}

3: Create two event listeners for when hovering and leaving the "About" button, passing through the functions created in step 2.

aboutButton.addEventListener('mouseover', aboutHover);
aboutButton.addEventListener('mouseout', aboutLeave);

4: Add styles for class "active" when paired with class "about" and the "h1" tag

h1.about.active{
  color: red
}

All together:

<!DOCTYPE html>
<html>
  <head>
    <styles>
      h1.about.active{
        color: red
      }
    </styles>
    <script>
      var aboutButton = document.getElementsByClassName('about button')[0];
      var aboutTitle = document.getElementsByClassName('about title')[0];

      function aboutHover(){
        aboutTitle.classList.add('active');
      }

      function aboutLeave(){
        aboutTitle.classList.remove('active');
      }

      aboutButton.addEventListener('mouseover', aboutHover);
      aboutButton.addEventListener('mouseout', aboutLeave);
    </script>
  </head>

  <body>
    <div class="main">`
      <div class="navbar">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#" class='about button'>About</a></li>
            <li><a href="#">Pictures</a></li>
          </ul>
        </nav>
      </div>

      <div class="logo">
        <h1 class='about title'>TITLE PAGE</h1>
      </div>
    </div>
  </body>

</html>

Changing the color property of a child element when hovering on a different parent div's child element

2 Answers2

Try it out here