Question

我有这个结构：

<nav>
    <ul>
        <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li>
        <li><a href="javascript:void(0)" class="menuitem">about</a></li>
        <li><a href="javascript:void(0)" class="menuitem">contact</a></li>
    </ul>
</nav>

当.active可以是三者之一时（它只是高亮显示用户所在的页面）。问题是我正在制作一个箭头＆＃34;通过.active选择器对::before项目进行高亮显示，我希望如果用户将鼠标悬停在任何项目上，则::before消息只会悬停在其上方。

它的外观如下：

http://i.imgur.com/cIZXHEN.png

悬停看起来像这样（看到问题？当悬停时，现在有两个箭头，我希望箭头只是悬停在箭头上，并将其隐藏在.active上，鼠标移开箭头后回到.active一个）：

http://i.imgur.com/JTLKNFK.png

这是我的css：

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
header nav ul li a.active::before {
  content: ">> ";
}
header nav ul li a:hover:before {
  content: ">> ";
}

Answer 1

这可以解决这个问题吗？

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
nav ul li a.active::before {
  content: ">> ";
}
nav ul:hover li a::before {
  content: none;
}
nav ul li a:hover:before {
  content: ">> ";
}

<nav>
    <ul>
        <li><a class="menuitem active">see all projects</a></li>
        <li><a class="menuitem">about</a></li>
        <li><a class="menuitem">contact</a></li>
    </ul>
</nav>

在悬停时，在活动项目之前隐藏::之前

1 个答案: