这是我的代码:
.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>
&#13;
该框有效,但我无法点击它。
请参阅下面的图片,了解我正在尝试做什么。 This is how it is now, but i cant click to change the colors, since the links are not working
答案 0 :(得分:0)
因为您已在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