Question

我尝试将鼠标悬停在font-awesome图标上以显示文字，但不起作用，但如果我将鼠标悬停在父类上，则会显示我试图显示的文字。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是一个快速解决方案。

在display:block

display:none

.tip-txt

将.help:hover .tip-txt替换为.fa-question-circle:hover + .tip-txt（+符号在.tip-txt之后选择.fa-question-circle的第一个元素
在display:none

display:block

.fa-question-circle:hover + .tip-txt

/* 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>

Answer 2

你必须像这样改变CSS

.fa-question-circle:hover + .tip-txt { 
    display: block;
  color: green;
   -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

因为这已经错了

.fa:hover .tip-txt

如果tip-txt直接位于容器内：

.fa:hover > .tip-txt{ display: block; }

如果tip-txt紧挨着（在容器关闭标记之后）容器：

.fa:hover + .tip-txt { display: block; }

如果tip-txt在容器内的某处：

.fa:hover .tip-txt { display: block; }

for ref https://plnkr.co/edit/4eMdRf5dOx0sNIEYD7Ig

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

2 个答案: