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

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

解

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

另一个空的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>