javascript - 对Google字体图标的悬停效果消失

尝试访问嵌入在其中的链接时，对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以增加可悬停区域的面积（可以根据需要添加代码）

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

最佳答案

将.customtooltip div放在#LanguageQ div之后。这对于CSS代码#LanguageQ:hover + .customtooltip {display: block;}起作用是必需的。
使.customtooltip类的width: 100%;。或根据需要将其更改为width/position。
删除jQuery代码。我给你一个CSS唯一的解决方案。
添加以下css：

#LanguageQ:hover + .customtooltip { display: block;}.customtooltip:hover { display: 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>