css - 在 css 中悬停后图标消失

Question

我正在研究 Angular JS (1.x)，我的要求是我需要在悬停在信息图标上时显示工具提示文本。工具提示文本显示得非常好。但问题是，当我将鼠标悬停在上面时，图标会消失。一旦我停止悬停，图标就会再次出现。

下面是我的 HTML 代码:

<div class="col-md-4 margin-left-26">            
    <span ng-show="{{ job.information }}" class="glyphicon glyphicon-info-sign
    spark-error-info pad-left-10" tooltip="{{job.information.sparkJob}}">
    </span>
</div>

这是我的 CSS:

.spark-error-info:hover:after{
      content: attr(tooltip);
      padding: 4px 8px;
      color: white;
      position: absolute;
      left: 0;
      margin-top:10px;
      top: 100%;
      z-index: 20;
      white-space: nowrap;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      background-color: #000000;
}

.spark-error-info:hover:before{
    border: solid;
    border-color: #000 transparent;
    border-width: 0px 10px 10px 10px;
    top: 0px;
    content: "";
    left: 97%;
    position: absolute;
    z-index: 99;
}

谁能帮我解决这个问题？

这是相同的 JsFiddle:https://jsfiddle.net/gLt86eqe/4/

Answer 1

问题

.glyphicon 图标需要伪元素 :before 使用content 属性渲染图标.

此 content 属性值(对于 .glyphicon 图标)在 :hover 状态下被覆盖，工具提示 用于绘制箭头的 content 属性，如下所示:

自然元素状态:

.glyphicon-info-sign:before {
    content: "\e086";
}

:hover 元素状态:

.spark-error-info:hover:before {
    border: solid;
    border-color: #000 transparent;
    border-width: 0px 10px 10px 10px;
    top: 0px;
    /* refrain from re-declaring the `content` property value as an empty string */
    /* content: ""; */ 
    left: 97%;
    position: absolute;
    z-index: 99;
}

选择器不同，但两个规则匹配并将应用于同一元素。

解决方案

考虑在 .glyphicon 图标的 span 元素中嵌套另一个元素。

另一个空的 span 元素可以专门用于工具提示 - 使用这种方法可以分离您的关注点。

HTML 示例:

<span class="glyphicon glyphicon-info-sign
    spark-error-info pad-left-10">
   <span class="icon-tooltip" tooltip="Hello this is my fiddle"></span>
</span>

CSS 示例:

然后根据给定的状态变化相应地调整上下文 css 选择器...

.spark-error-info:hover .icon-tooltip:after { ... }

.spark-error-info:hover .icon-tooltip:before { ... }

代码片段演示:

.spark-error-info:hover .icon-tooltip:after {
  content: attr(tooltip);
  padding: 4px 8px;
  color: white;
  position: absolute;
  left: 0;
  margin-top: 10px;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #000000;
}

.spark-error-info:hover .icon-tooltip:before {
  border: solid;
  border-color: #000 transparent;
  border-width: 0px 10px 10px 10px;
  top: 0px;
  content: ""; 
  left: 97%;
  position: absolute;
  z-index: 99;
}

.margin-left-26 {
  margin-left: 26px;
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-4 margin-left-26">
    <span class="glyphicon glyphicon-info-sign
    spark-error-info pad-left-10">
      <span class="icon-tooltip" tooltip="Hello this is my fiddle"></span>
    </span>
  </div>
</div>