CSS 在兄弟悬停时选择活动类

Answer 1

对我来说效果很好

.nav-link::before {
  content: '>>> ';
}

.nav-link::after {
  content: ' <<<';
}

.nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::before {
  background: blue;
}

.nav-tabs:has(.nav-link:not(.active):hover) .nav-link.active::after {
  background: red;
}

<ul class="nav nav-tabs">
  <li class="nav-item">
    <div class="nav-link active" href="#">Tab 1</div>
  </li>
  <li class="nav-item">
    <div class="nav-link">Tab 2</div>
  </li>
  <li class="nav-item">
    <div class="nav-link">Tab 3</div>
  </li>
  <li class="nav-item">
    <div class="nav-link">Tab 4</div>
  </li>
</ul>