代码之家 › 专栏 › 技术社区 › Anubha Gupta

在css中悬停后图标消失

tooltip twitter-bootstrap angularjs css

Anubha Gupta · 技术社区 · 7 年前

我正在研究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;
}

有人能帮我吗?

下面是相同的JSFIDLE: https://jsfiddle.net/gLt86eqe/4/

1 回复 | 直到 7 年前

Community dbr 4 年前

问题

这个 .glyphicon 图标需要 伪元素 :before 使用渲染图标 content 所有物

这 所容纳之物 属性值(用于 .字形图标 图标)正在 :hover 状态,带有工具提示 所容纳之物 属性用于绘制箭头,请参见以下内容:

自然元素状态:

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

:悬停 元素状态:

.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 的元素 .字形图标 偶像

另一个空的 跨度 可以使用元素 明确地 对于工具提示,使用此方法可以分离关注点。

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>