Question

<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">&#x270f;</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;
}

我做错了什么？

Answer 1

现在，您的内联样式优先于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">&#x270f;</span>
                      <br><br>
</p>

#tags #icon_span_id{
  visibility: hidden;
  color:red;
}
#tags:hover #icon_span_id{
  visibility: visible;
  color:red;
}

Answer 2

你走了：

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

设置嵌套的html元素可见

2 个答案: