使用文本标识时链接消失:-9999px

Question

这是我的代码：

.card {
  box-sizing: border-box;
  display: inline-block;
  padding: 16px;
  width: 25%;
  position: relative;
}
.card_colorSecond {
  background-color: #FF1010;
  /* vermelho */
}
.wrap-card-color {
  position: absolute;
  top: -16px;
  left: 0;
}
.card-color {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
}

<li class="card card_colorSecond">
  <nav class="wrap-card-color">
    <ul>
      <li class="card-color card-color_colorFirst"><a href="#">Azul</a></li>
      <li class="card-color card-color_colorSecond"><a href="#">Vermelho</a></li>
      <li class="card-color card-color_colorThird"><a href="#">Verde</a></li>
      <li class="card-color card-color_colorFourth"><a href="#">Amarelo</a></li>
    </ul>
  </nav>
  <p>
    Aliquam voluptate quidem iure excepturi laboriosam ex optio vel et earum eligendi, inventore cum harum, rem tempora, explicabo ipsum quos quis! Nobis ut saepe tempore, veniam excepturi velit rem, cumque cupiditate, quaerat soluta, repellendus ex non?
    Ut pariatur, sit nesciunt!
  </p>
</li>

该框有效，但我无法单击它。

请参阅下图以了解我正在尝试做什么。现在就是这样，但我无法单击以更改颜色，因为链接不起作用

Answer 1

因为您已经对<li>元素应用了text-indent...它表示<li>内的所有文本元素，即 <a>将缩进到左侧-9999px

在<a>上应用文本缩进而不是<li>..它将打算在<a>内的文本。

堆栈代码段

.card {
  box-sizing: border-box;
  display: inline-block;
  padding: 16px;
  width: 25%;
  position: relative;
}
.card_colorSecond {
  background-color: #FF1010;
  /* vermelho */
}
.wrap-card-color {
  position: absolute;
  top: -16px;
  left: 0;
}
.card-color {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
}
.card-color a {
  text-indent: -9999px;
  display: block;
}

<li class="card card_colorSecond">
  <nav class="wrap-card-color">
    <ul>
      <li class="card-color card-color_colorFirst"><a href="#">Azul</a></li>
      <li class="card-color card-color_colorSecond"><a href="#">Vermelho</a></li>
      <li class="card-color card-color_colorThird"><a href="#">Verde</a></li>
      <li class="card-color card-color_colorFourth"><a href="#">Amarelo</a></li>
    </ul>
  </nav>
  <p>
    Aliquam voluptate quidem iure excepturi laboriosam ex optio vel et earum eligendi, inventore cum harum, rem tempora, explicabo ipsum quos quis! Nobis ut saepe tempore, veniam excepturi velit rem, cumque cupiditate, quaerat soluta, repellendus ex non?
    Ut pariatur, sit nesciunt!
  </p>
</li>

或者另一个选项只是<a> opacity:0设置......无需使用text-indent

.card {
  box-sizing: border-box;
  display: inline-block;
  padding: 16px;
  width: 25%;
  position: relative;
}
.card_colorSecond {
  background-color: #FF1010;
  /* vermelho */
}
.wrap-card-color {
  position: absolute;
  top: -16px;
  left: 0;
}
.card-color {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
}
.card-color a {
  opacity: 0;
  display: block;
}

<li class="card card_colorSecond">
  <nav class="wrap-card-color">
    <ul>
      <li class="card-color card-color_colorFirst"><a href="#">Azul</a></li>
      <li class="card-color card-color_colorSecond"><a href="#">Vermelho</a></li>
      <li class="card-color card-color_colorThird"><a href="#">Verde</a></li>
      <li class="card-color card-color_colorFourth"><a href="#">Amarelo</a></li>
    </ul>
  </nav>
  <p>
    Aliquam voluptate quidem iure excepturi laboriosam ex optio vel et earum eligendi, inventore cum harum, rem tempora, explicabo ipsum quos quis! Nobis ut saepe tempore, veniam excepturi velit rem, cumque cupiditate, quaerat soluta, repellendus ex non?
    Ut pariatur, sit nesciunt!
  </p>
</li>