html - font-awesome 上的工具提示悬停状态

Question

我正在尝试将鼠标悬停在超棒的字体图标上以显示文本，但是不起作用，但如果我将鼠标悬停在父类上，它会显示我要显示的文本。

我试过 .fa:hover .tip-txt 不起作用，忽略 tip.text 和悬停状态上的反向 display:block。不想为这个简单的东西做 jquery，我在 css 中有一种方法只需要调用正确的类。

/* Styles go here */

.tip {
    position: relative;
    float: left;
    left: 20px;
    
}

.help {
    text-align: right;
    display: block;
}
.tip-txt {
    width: 145px;
    position: absolute;
    display: block;
    background: #333;
    padding: 10px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    transition: .5s ease-in-out;
    box-sizing: border-box;
    text-align: left;
}
.fa {
    font-size: 16px;
    transition: .5s ease-in-out;
}
.help:hover .tip-txt { 
    display: none;
    color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="tip">
  <span class="help">
    Help
    <i class="fa fa-question-circle"></i>
    <span class="tip-txt">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </span>
  </span>
</div>

Answer 1

这是一个快速的解决方案。

• 将 .tip-txt

  中的 display:block 更改为 display:none

• 将 .help:hover .tip-txt 替换为 .fa-question-circle:hover + .tip-txt(+ 符号选择 .fa-question-circle 之后带有 .tip-txt 的第一个元素)

• 在 .fa-question-circle:hover + .tip-txt 中将 display:none 更改为 display:block

/* Styles go here */

.tip {
    position: relative;
    float: left;
    left: 20px;
    
}

.help {
    text-align: right;
    display: block;
}
.tip-txt {
    width: 145px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: #333;
    padding: 10px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    transition: .5s ease-in-out;
    box-sizing: border-box;
    text-align: left;
    transition: opacity .3s;
}
.fa {
    font-size: 16px;
    transition: .5s ease-in-out;
}
.fa-question-circle:hover + .tip-txt { 
    visibility: visible;
    color: red;
    opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="tip">
  <span class="help">
    Help
    <i class="fa fa-question-circle"></i>
    <span class="tip-txt">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </span>
  </span>
</div>