html - 设置嵌套的 html 元素可见

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;
}