When it comes to CSS interactions, the limitation of only affecting elements within or below the current element can be overcome using Javascript to manage hover effects for you. By utilizing the addEventListener function, you can create both mouseover and mouseout events on your restaurant text to dynamically add or remove a hover class from any desired element.
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 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br />
but here for them.
</h1>
If you prefer to stick to HTML and CSS exclusively, altering the order of your elements in the HTML structure is necessary. Placing the element you want to modify below the triggering element enables this setup. In this scenario, repositioning the nav and h1 within a container div and adjusting their order accomplishes this. The presentation sequence is regulated with the properties display: flex and flex-direction: column-reverse. Hover effects can be achieved by applying the CSS selector ~, which selects an element that follows another. For example, .textb:hover ~ nav targets a hovered over .textb element followed by nav. Specific menu items can also be tailored using this method.
.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 class="reversed">
<h1 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br />
but here for them.
</h1>
<nav>
<ul>
<li>
<a class="about" href="file:///C:/Users/.../index.html">Home</a>
</li>
<li>
<a href="file:///C:/Users/.../about.html">About</a>
</li>
</ul>
</nav>
</div>