Changing color of menu on text hover-CodePudding

I want to change the color of the menu on text hover. But not when the menu text is hovered but another heading. I have a heading "Not a restaurant, but here for them." and when the user hovers the word "restaurant" the menu text color should change to white and the word "restaurant" to red and the rest of the heading to white. The second part (that "restaurant" changes to red and the rest of the heading to white) already works. But how can I make it that also the color of the menu changes?

.headingRestaurant:hover {
  color: red;
}

.headingRestaurant {
  cursor: pointer;
}

.textb {
  pointer-events: none;
}

.headingRestaurant {
  pointer-events: initial;
}

.textb:hover {
  color: white;
}

<nav>
  <ul>
    <li>
      <a href="file:///C:/Users/.../index.html">Home</a>
    </li>
    <li>
      <a href="file:///C:/Users/.../about.html">About</a>
    </li>
  </ul>
</nav>

<h1 >
  Not a <span id="heading1" >restaurant</span>,
  <br> but here for them.
</h1>

CodePudding user response：

Replace target with whatever class/id you are using to identify your menu element and it will control the styling when hovering on the .headingRestaurant element.

.headingRestaurant:hover target {

}

CodePudding user response：

Since CSS can only interact with things inside or below the current element, the easiest solution would be to use Javascript to handle the hover for you. You can use the function addEventListener to add both a mouseover and a mouseout event on your restaurant text to add/remove a hover class to whichever element you want to hover.

var nav = document.querySelector('nav');
var headingRestaurant = document.querySelector('.headingRestaurant');

headingRestaurant.addEventListener('mouseover', function() {
    nav.classList.add('hover');
});

headingRestaurant.addEventListener('mouseout', function() {
    nav.classList.remove('hover');
});

.headingRestaurant:hover {
    color: red;
}

.headingRestaurant {
    cursor: pointer;
}

.textb {
    pointer-events: none;
}

.headingRestaurant {
    pointer-events: initial;
}

.textb:hover {
    color: white;
}

nav.hover,
nav.hover a {
    color: red;
}

<nav>
    <ul>
        <li>
            <a
            href="file:///C:/Users/.../index.html"
                        >Home</a
                        >
        </li>
        <li>
            <a
            href="file:///C:/Users/.../about.html"
                        >About</a
                        >
        </li>
    </ul>
</nav>

<h1 >
    Not a <span id="heading1" >restaurant</span>,
    <br />
    but here for them.
</h1>

If you'd like to use html and css only, you'd have to reverse the html flow so that the element you want to change is coded below the element you're hovering over.

In this case I've moved the nav and h1 to a container div and swapped them around so that the h1 is coded above the nav. The display order is then fixed by using both the properties display: flex and flex-direction: column-reverse. The hover in this method uses the css selector ~ which matches an selector that is preceded by another selector. In the case of .textb:hover ~ nav it would select any nav element that is preceded by a .textb which is hovered over. Since the part after the ~ is still a selector, you could also change a specific menu item.

.headingRestaurant {
    cursor: pointer;
    pointer-events: initial;
}

.textb {
    pointer-events: none;
}

.textb:hover {
    color: white;
}

.textb:hover .headingRestaurant {
    color: red;
}

.textb:hover ~ nav,
.textb:hover ~ nav a {
    color: red;
}

.textb:hover ~ nav a.about {
    color: purple;
}

.reversed {
    display: flex;
    flex-direction: column-reverse;
}

<div >
  <h1 >
      Not a <span id="heading1" >restaurant</span>,
      <br />
      but here for them.
  </h1>

  <nav>
      <ul>
          <li>
              <a  href="file:///C:/Users/.../index.html">Home</a>
          </li>
          <li>
              <a href="file:///C:/Users/.../about.html">About</a>
          </li>
      </ul>
  </nav>

</div>

CodePudding user response：

:has is definitely the way to go here but there are some clever cookies out there who might come up with something innovative.

/* This is just making things pretty */

nav ul li {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0;
  border: 1px dotted red;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li a {
  text-decoration: none;
  color: inherit;
}


/* This is the functional stuff */

.headingRestaurant:hover {
  color: red;
}

.headingRestaurant {
  cursor: pointer;
}

.textb {
  pointer-events: none;
}

.headingRestaurant {
  pointer-events: initial;
}

.textb:hover {
  color: white;
}


/* This colours the menu on hover */

body:has(.headingRestaurant:hover) nav {
  background-color: lightblue;
}

<nav>
  <ul>
    <li>
      <a href="file:///C:/Users/.../index.html">Home</a>
    </li>
    <li>
      <a href="file:///C:/Users/.../about.html">About</a>
    </li>
  </ul>
</nav>

<h1 >
  Not a <span id="heading1" >restaurant</span>,
  <br> but here for them.
</h1>