Question

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

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

Answer 1

你可以通过多种方式实现这一目标，其中一种方式是：

＆＃13;

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

＆＃13;

.customtooltip {
  background-color: #666666 !important;
  color: #E7E7E7;
  padding: 5px;
  z-index: 3;
  position: absolute;
  left: 20%;
  width: 75%;
  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;
}

＆＃13;

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

＆＃13;

在此，我已将您的.customtooltip和#languageQ div包裹在一起，并在容器本身上应用javascript hover功能。这样我就在hover函数中包含了你的元素，之前只包含#languageQ div，因此当你离开div时它会立即消失。

解决问题的另一种方法是将目标元素（在您的情况下为.customtooltip）嵌套在悬停的（#languageQ）内，而无需使用javascript。只使用css。

#Target:hover, #Hovered:hover + #Target
{
    display: block;
}

Answer 2

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

悬停效果对谷歌字体图标消失

2 个答案: