Question

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

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，我们可以将徽标放在菜单的末尾，但可视让它出现在中间

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

FWIW：

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

悬停子目标嵌套元素

2 个答案: