悬停子目标嵌套元素

Question

我正在构建一个水平导航，分为 5 个项目。第三项是网站的标志。我想在其他项目上创建悬停效果并定位徽标。是否有用于悬停 .main-nav-item 和定位 .logo 的纯 css 解决方案？

html:

<nav class="main-nav close-nav">
  <ul id="menu" class="main-nav-list">
    <li class="main-nav-item"></li>
    <li class="main-nav-item"></li>
    <li>
      <a href="">
        <div id="main-nav-home" class="main-nav-home">
          <span class="main-nav-title"></span>
          <span class="main-nav-subtitle"></span>
          <div class="main-nav-logo">
            <div class="logo">
          </div>
        </div>
        </div>
      </a>
    </li>
    <li class="main-nav-item"></li>
    <li class="main-nav-item"></li>
  </ul>
</nav>

提前致谢！

Answer 1

使用.parent-class:hover .target-child: { ... }

参考live example code或遵循css代码。

nav {
  background-color: gray;
}

.main-nav-item:hover {
  color: red;
}

.main-nav:hover .logo {
  color: blue;
}

Answer 2

正如我在评论中提到的，通过重组菜单并利用 flexbox 和 order 我们可以将徽标放在菜单的末尾，但是 视觉上 它出现在中间。

由于可以通过参考任何先前的兄弟来选择最后一个 child，我们可以实现 OP 正在寻找的效果，并让每个先前的兄弟以不同方式影响最后一个 child。

FWIW:

nav {
  text-align: center;
}
ul {
  list-style-type: none;
  display: inline-flex;
}
a {
  text-decoration: none;
  padding: 1em;
  color: #000;
  font-weight: bold;
  border: 1px solid green;
}
li {
  order: 3
}
li:nth-child(1),
li:nth-child(2) {
  order: 1;
}
.logo {
  order: 2;
}
.logo a {
  background: lightblue;
}
.logo:hover a {
  background: plum;
}
li:nth-child(1):hover ~ .logo a {
  background: lightgreen;
}
li:nth-child(2):hover ~ .logo a {
  background: green;
}
li:nth-child(3):hover ~ .logo a {
  background: red;
}
li:nth-child(4):hover ~ .logo a {
  background: grey
}

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Clients</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
    <li class="logo"><a href="#">Logo</a>
    </li>
  </ul>
</nav>

注意：显然这个解决方案有点不灵活，不能很好地扩展，但选项是存在的。

悬停子目标嵌套元素

Hover child target nested element

html

css

navigation