使用text-ident时链接消失：-9999px

Question

这是我的代码：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

请参阅下面的图片，了解我正在尝试做什么。 This is how it is now, but i cant click to change the colors, since the links are not working

Answer 1

因为您已在text-indent元素上应用<li> ...这意味着<li>中的所有文本元素，即<a>将缩进到左侧{{1} }

在-9999px而不是<a>上应用文字缩进..它会打算<li>内的文字。

Stack Snippet

<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>的{​​{1}} ...无需使用opacity:0

<a>

text-indent