Question

我在导航菜单中的链接旁边有伪元素。有一个小的向下箭头表示下拉，而在悬停时，背景会发生变化。但是，覆盖的唯一区域是活动链接而不是向下箭头。

以下是一个样本：

＆＃13;

.item > a {
      color: #000;
      padding-top: 1.5rem;
      padding-bottom: 1.1rem;
}

.item > a:hover {
    background-color: blue;
    color: #fff;
}

.arrow-nav-item:after {
      content: '';
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #5a5a5a;
      clear: both;
      position: absolute;
      top: 25px;
      right: 625px;
}

＆＃13;

<ul id="items">
    <li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
        <ul class="subitem">
          <li><a href="#">Chapter 1</a></li>
        </ul>
    </li>
  </ul>

＆＃13;

基本上我的锚标签上有一个::after，它绝对定位并且样式看起来像向下箭头。在悬停时，会出现一个背景，我希望箭头包含在彩色悬停区域内。

我认为不包括它的原因是因为绝对定位 - 因为当箭头是相对的时候，我可以将它包含在悬停区域中。我不认为我能做到这一点，因为给:after相对定位会失去对位置的控制。

我尝试了几件事：向锚点添加更多右边距，在锚点上设置固定宽度并更改伪元素的位置（将其移动到<li>标记）等。

这应该重构改变吗？绝对定位不是处理这些假元素的最佳方法吗？

Answer 1

以这种方式使用right会在屏幕调整大小时出现问题。相反，您可以移除absolute定位并使用margin定位锚点

.item>a {
  color: #000;
  padding-top: 1.5rem;
  padding-bottom: 1.1rem;
}

.item>a:hover {
  background-color: blue;
  color: #fff;
}

.arrow-nav-item:after {
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #5a5a5a;
  margin-left: 1em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}

.arrow-nav-item:hover:after {
  border-top-color: #FFF;
}

<ul id="items">
  <li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
    <ul class="subitem">
      <li><a href="#">Chapter 1</a></li>
    </ul>
  </li>
</ul>

Answer 2

虽然绝对定位是处理此问题的好方法，但您当然不希望使用相对于 right 的巨型偏移量。我建议使用 ::before ，只需在下拉列表中设置一个小的 margin-left ：

.item>a {
  color: #000;
  padding-top: 1.5rem;
  padding-bottom: 1.1rem;
}

.item>a:hover {
  background-color: blue;
  color: #fff;
}

.arrow-nav-item:before {
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #5a5a5a;
  position: absolute;
  margin-left: -35px;
  margin-top: 5px;
}

<ul id="items">
  <li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
    <ul class="subitem">
      <li><a href="#">Chapter 1</a></li>
    </ul>
  </li>
</ul>

请注意，这使得下拉列表相对于元素的左侧，因此无论<li>. However, it still has the dropdown arrow outside of the`的内容如何，它都将始终显示在同一位置。问题是，为了让背景覆盖两个组件，您需要在项目符号点内移动箭头。

然后可以使用<a>标记本身上的 padding-left 进行补偿，以便下拉列表保留在蓝色背景中：

.item>a {
  color: #000;
  padding-top: 1.5rem;
  padding-bottom: 1.1rem;
}

.item>a:hover {
  background-color: blue;
  color: #fff;
}

.arrow-nav-item:before {
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #5a5a5a;
  position: absolute;
  margin-left: -15px;
  margin-top: 5px;
}

.arrow-nav-item {
  padding-left: 20px; /* Larger than margin-left */
}

<ul id="items">
  <li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
    <ul class="subitem">
      <li><a href="#">Chapter 1</a></li>
    </ul>
  </li>
</ul>

我认为不可能在项目符号点之外留下下拉箭头并仍然保留背景，但希望这样就足够了：）

在锚悬停状态中包含一个伪元素

2 个答案: