在标签中悬停时没有内容
在标签中悬停时没有内容
提问于 2018-02-25 14:18:53
在悬停时，我想删除标签中的内容。我只试过用葡萄牙标签。当在元素中工作时，它是否受到限制？谢谢
.tablabel {
background: rgba(0, 0, 0, .6);
border: 1px solid #000;
color: #fff !important;
height: 40px;
line-height: 37px;
width: auto;
padding: 2px 8px 2px 8px;
box-shadow: inset 0 0 0 0.1 transparent;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out .4s;
transition: ease-out .4s;
transform: translate3d(0, 0, 0);
font-size: 1.15em;
}
.tablabel:hover {
color: #000 !important;
}
#portimg {
content: 'PORTUGAL';
}
#portimg:hover {
content: none;
background: url("/images/flags/portugal-flag.svg");
background-position: center 10%;
background-size: 200px;
transform: translate3d(0, 0, 0);
}
#portimg:hover:after {
content: none;
}<div class="col-8 justify-content-center">
<input id="tab-1" type="radio" checked="checked" name="tab-groupa" />
<input id="tab-2" type="radio" name="tab-groupa" />
<input id="tab-3" type="radio" name="tab-groupa" />
<input id="tab-4" type="radio" name="tab-groupa" />
<input id="tab-5" type="radio" name="tab-groupa" />
<p class="row text-center justify-content-center text-center">
<label id="portimg" class="tablabel" for="tab-1"></label>
<label id="ukimg" class="tablabel" for="tab-2">UNTIED KINGDOM</label>
<label class="tablabel btn btn-dark white text-center" for="tab-3">CYPRUS</label>
<label class="tablabel btn btn-dark white text-center" for="tab-4">SPAIN</label>
<label class="tablabel btn btn-dark white text-center" for="tab-5">GREECE</label>
</p>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-25 14:41:26
只需编辑#porting选择器即可：
#portimg:after {
display: inline;
content: 'PORTUGAL';
}这里你的代码被编辑了。
.tablabel {
background: rgba(0, 0, 0, .6);
border: 1px solid #000;
color: #fff !important;
height: 40px;
line-height: 37px;
width: auto;
padding: 2px 8px 2px 8px;
box-shadow: inset 0 0 0 0.1 transparent;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out .4s;
transition: ease-out .4s;
transform: translate3d(0, 0, 0);
font-size: 1.15em;
}
.tablabel:hover {
color: #000 !important;
}
#portimg:after {
display: inline;
content: 'PORTUGAL';
}
#portimg:hover {
content: none;
background: url("/images/flags/portugal-flag.svg");
background-position: center 10%;
background-size: 200px;
transform: translate3d(0, 0, 0);
}
#portimg:hover::after {
content: none;
}<div class="col-8 justify-content-center">
<input id="tab-1" type="radio" checked="checked" name="tab-groupa" />
<input id="tab-2" type="radio" name="tab-groupa" />
<input id="tab-3" type="radio" name="tab-groupa" />
<input id="tab-4" type="radio" name="tab-groupa" />
<input id="tab-5" type="radio" name="tab-groupa" />
<p class="row text-center justify-content-center text-center">
<label id="portimg" class="tablabel" for="tab-1"></label>
<label id="ukimg" class="tablabel" for="tab-2">UNTIED KINGDOM</label>
<label class="tablabel btn btn-dark white text-center" for="tab-3">CYPRUS</label>
<label class="tablabel btn btn-dark white text-center" for="tab-4">SPAIN</label>
<label class="tablabel btn btn-dark white text-center" for="tab-5">GREECE</label>
</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48974469
复制相关文章
相似问题
腾讯云开发者
