更改文本懸停時選單的顏色

我想在文本懸停時更改選單的顏色。但不是當選單文本懸停時而是另一個標題。我有一個標題“不是餐廳，而是為他們準備的”。當用戶懸停“餐廳”一詞時，選單文本顏色應變為白色，“餐廳”一詞變為紅色，標題的其余部分變為白色。第二部分（“餐廳”變為紅色，標題的其余部分變為白色）已經有效。但是我怎樣才能讓選單的顏色也改變呢？

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

uj5u.com熱心網友回復：

將 target 替換為您用來識別選單元素的任何類/ID，當懸停在 .headingRestaurant 元素上時，它將控制樣式。

.headingRestaurant:hover target {

}

uj5u.com熱心網友回復：

由于 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它將選擇懸停在nava 之前的任何元素。.textb由于后面的部分~仍然是選擇器，因此您還可以更改特定的選單項。

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

uj5u.com熱心網友回復：

:has 絕對是去這里的方式，但是那里有一些聰明的餅干可能會想出一些創新的東西。

/* 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>

標籤：htmlcss

上一篇：<li>元素上的懸停屬性問題

下一篇：有條件地更改回圈生成表中單元格的格式