将嵌套的html元素设置为可见
将嵌套的html元素设置为可见
提问于 2018-06-05 08:33:59
<p style="display:inline" id="tags">
<span><i class="fas fa-tag"></i></span>
<p style="display:inline" contenteditable="true">`+elem.tags.join(',')+`</p>
<span style="display:inline" id ="icon_span_id" class="glyphicon">✏</span>
<br><br>
</p>我正在尝试将icon_span_id设置为在悬停时可见。到目前为止，这是我的代码；但是没有魔力。
.animated_blinker {
animation: blinker 2s linear infinite;
}
#tags #icon_span_id{
visibility: hidden;
}
#tags:hover #icon_span_id{
visibility: visible;
}我做错了什么？
回答 2
Stack Overflow用户
发布于 2018-06-05 08:54:53
现在，您的内联样式只是优先于hover样式。将visibility: hidden样式从内联样式移到自己的样式中，它就可以工作了。
https://jsfiddle.net/4wt6f1y3/10/
<p id="tags">
<span><i class="fas fa-tag"></i></span>Some text
<span id ="icon_span_id" class="glyphicon">✏</span>
<br><br>
</p>
#tags #icon_span_id{
visibility: hidden;
color:red;
}
#tags:hover #icon_span_id{
visibility: visible;
color:red;
}Stack Overflow用户
发布于 2018-06-05 08:57:54
这就是了：
添加jquery来捕捉悬停和鼠标离开时的事件:这有点像jquery：
$('#tags').mouseenter(function() {
$('#icon_span_id').removeAttr('style');}).mouseleave(function() {
$('#icon_span_id').attr('style', 'visibility:hidden');});在此处检查代码预览：https://codepen.io/navotera/pen/YvqGgE
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50690488
复制相关文章
相似问题