javascript - 悬停对谷歌字体图标消失的影响

Question

google 字体图标 上的悬停效果在尝试访问嵌入其中的链接时消失。我实现了一个类似的概念，但在图像上，它完美地工作。很确定我在 CSS 中出错了

$('#LanguageQ').hover(function(){
$('.customtooltip').show();
}, function(){
$('.customtooltip').hide(); 
});

.customtooltip{
    background-color: #666666 !important;
    color: #E7E7E7;
    padding: 5px;
    z-index: 3;
    position:absolute;
    left:12%;
    width: 36%;
    font-size: 0.8vw;
    display:none;
    cursor: pointer;
}
div.mandatory {
    display: inline-block;
    width: 44%;
    margin: 0 0.5%;
}
.mandatory {
    position: relative;
}
.mandatory:active::before {
    content: '';
}
.mandatory::before {
    content: '*';
    color: red;
    position: absolute;
    left: 2%;
    z-index: 5;
    font-size: 15px;
    top: 4%;
    font-weight: 800;
}
.Input-icon {

    position: absolute;

    top: 26%;

    right: 6%;

    z-index: 5;

    font-size: 3ch;

    color: #cecece;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div>

  <div class="customtooltip">Can't find your language? Please <a href="">contact us</a></div>
  <div class="mandatory">
  <div class="Input-icon material-icons"
                                           id="LanguageQ">help_outline</div>
    <input type="text" name="language[]" id="name_input"  class=" nameinput form-control inputfield input gray mandatory" 
                                       list="huge_list" placeholder="Languages">
</div>
       

预期:当悬停文本出现时，我需要能够转到链接。

到目前为止我尝试了什么:创建一个隐藏的div以增加悬停区域的面积(如果需要可以添加代码)

任何帮助或指点将不胜感激。谢谢

Answer 1

1. 将 .customtooltip div 放在 #LanguageQ div 之后。这是 css 代码 #LanguageQ:hover + .customtooltip {display: block;} 工作所必需的。

2. 使.customtooltip 类的width: 100%;。或者根据需要更改它的宽度/位置。

3. 删除 jQuery 代码。我给你的是一个只有 CSS 的解决方案。

4. 添加以下CSS:

   #LanguageQ:hover + .customtooltip {
显示: block ；
}
.customtooltip:悬停{
显示: block ；
}

.customtooltip{
    background-color: #666666 !important;
    color: #E7E7E7;
    padding: 5px;
    z-index: 3;
    position:absolute;
    left:12%;
    width: 100%;
    font-size: 0.8vw;
    display:none;
    cursor: pointer;
}
div.mandatory {
    display: inline-block;
    width: 44%;
    margin: 0 0.5%;
}
.mandatory {
    position: relative;
}
.mandatory:active::before {
    content: '';
}
.mandatory::before {
    content: '*';
    color: red;
    position: absolute;
    left: 2%;
    z-index: 5;
    font-size: 15px;
    top: 4%;
    font-weight: 800;
}
.Input-icon {

    position: absolute;

    top: 26%;

    right: 6%;

    z-index: 5;

    font-size: 3ch;

    color: #cecece;
}

#LanguageQ:hover + .customtooltip {
    display: block;
}
.customtooltip:hover {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div>

  
  <div class="mandatory">
  <div class="Input-icon material-icons"
                                           id="LanguageQ">help_outline</div>
    <div class="customtooltip">Can't find your language? Please <a href="">contact us</a></div>
    <input type="text" name="language[]" id="name_input"  class=" nameinput form-control inputfield input gray mandatory" 
                                       list="huge_list" placeholder="Languages">
</div>