希望大家都做得很好。在这里,我遇到与CSS中:: after相关的问题,请在下面找到代码详细信息。...
.Product__sizes__tooltiptext {
display: none;
}
.Product__sizes__button {
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
}
// disabled buttons
.Product__sizes__tooltiptext{
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
}
.Product__sizes__tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
}
.Product__sizes__tooltip:hover .Product__sizes__tooltiptext{
display: block;
opacity: 1;
}
.Product__sizes__tooltip {
position: relative;
display: inline-block;
}
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>
在这里,我想删除在工具提示标记::: after上添加的额外边框颜色。请让我知道我是否还有其他需要。在此先感谢!
只想删除黑色:: ::边框应如下图所示
答案 0 :(得分:1)
为了获得图像的外观,您需要使用彼此叠置的:before
和:after
。您的代码需要添加不仅仅是after标签的内容,才能获得您想要的效果。
可能值得考虑使用this之类的工具提示生成器,以在将来为您提供帮助。
目前,我已将您的代码修改为图片的外观:
.Product__sizes__button {
background: #FFFFFF;
border: 1px solid #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
}
a.Product__sizes__tooltip {
position: absolute;
display: inline;
top: 50px;
left: 80px;
}
a.Product__sizes__tooltip .Product__sizes__tooltiptext {
display: none;
position: absolute;
width: max-content;
padding: 0 10px;
color: #000000;
background: #F2F2F2;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 3px;
}
a.Product__sizes__tooltip .Product__sizes__tooltiptext:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0;
height: 0;
border-top: 12px solid #6D6D6D;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
a.Product__sizes__tooltip .Product__sizes__tooltiptext:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #F2F2F2;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.Product__sizes__tooltip .Product__sizes__tooltiptext {
display: block;
opacity: 0.8;
bottom: 52px;
left: -200%;
z-index: 999;
}
<a href="#" class="tooltips Product__sizes__button Product__sizes__tooltip disabled">6.5
<span class="Product__sizes__tooltiptext">Not available in selected size</span></a>
答案 1 :(得分:0)
您只需将.Product__sizes__button {}中的border属性设置为solid即可。它将删除周围的边框。
.Product__sizes__tooltiptext {
display: none;
}
.Product__sizes__button {
background: #FFFFFF;
border: 1px none #333;
color: #333;
display: block;
font-size: 16px;
line-height: 42px;
height: 42px;
text-align: center;
width: 42px;
}
.Product__sizes__button.disabled .Product__sizes__tooltiptext {
display: none;
height: 28px;
line-height: 28px;
background-color: #f1f1ef;
color: #000;
width: 180px;
border: 1px solid #808285;
padding: 0px 2px;
position: absolute;
z-index: 1;
margin-top: -80px;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
}
.Product__sizes__button.disabled .Product__sizes__tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
border-left: 8px solid #808285;
border-right: 8px solid #808285;
border-top: 7px solid #f1f1ef;
}
.Product__sizes__button.disabled:hover .Product__sizes__tooltiptext {
display: block;
opacity: 1;
}
.Product__sizes__tooltip {
position: relative;
display: inline-block;
}
<a href="#" class="Product__sizes__button Product__sizes__tooltip disabled">
6.5<span class="Product__sizes__tooltiptext">Not available in selected size</span>
</a>