更改文本悬停时菜单的颜色

Question

我想在文本悬停时更改菜单的颜色。但不是当菜单文本悬停时，而是另一个标题。我有一个标题"；不是餐馆，但这里是为他们准备的"并且当用户悬停单词"时；餐馆"；菜单文本的颜色应该变为白色；餐馆"；变为红色，其余标题变为白色。第二部分("餐厅"变为红色，标题的其余部分变为白色(已经起作用了。但是我怎样才能使菜单的颜色也发生变化呢？

.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 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br> but here for them.
</h1>

Answer 1

由于CSS只能与当前元素内部或下方的事物交互，因此最简单的解决方案是使用Javascript来处理悬停。您可以使用函数addEventListener在餐厅文本上添加mouseover和mouseout事件，以将悬停类添加/删除到要悬停的元素中。

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>

如果您只想使用html和css，则必须反转html流，以便将要更改的元素编码在您悬停的元素下方。

在这种情况下，我已经将nav和h1移动到一个容器div中，并将它们交换，以便h1在nav之上进行编码。然后通过使用属性display: flex和flex-direction: column-reverse来固定显示顺序。此方法中的悬停使用css选择器~，该选择器与前面有另一个选择器的选择器相匹配。在.textb:hover ~ nav的情况下，它将选择在其上悬停的.textb之前的任何nav元素。由于~之后的部分仍然是选择器，因此您也可以更改特定的菜单项。

.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>

Answer 2

：这肯定是一条路，但也有一些聪明的cookie可能会想出一些创新的东西。请注意，这还没有得到完全支持。

/* 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 class="textb">
Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
<br> but here for them.
</h1>

Answer 3

将target替换为用于标识菜单元素的任何class/id，当悬停在.headingRestaurant元素上时，它将控制样式。

.headingRestaurant:hover target {
}