Jquery悬停在div上，在祖父母上添加样式答案

【问题标题】：Jquery hover on div, add styles on grandparentJquery悬停在div上，在祖父母上添加样式
【发布时间】：2016-12-15 16:59:07
【问题描述】：

我有一个大问题，我找不到解决方案...

我必须做工具提示，例如我们有这样的结构：

<body> 
  **<div class="tooltip">Long text ...</div>**
  <div style="overflow:hidden">
    <div class="box">
      **<h1>Short text</h1>**
    </div>
  </div>
</body>

如果我在h1 上，我想使用类工具提示visibility:visible 添加到div，我该怎么做？

希望你能找到解决这个问题的办法。

【问题讨论】：

使用$('h1').closest('.tooltip').css({'visibility':'visible'})
该 HTML 结构是必需的，还是可以将其更改为更易于使用？

标签： javascript jquery html css hover

【解决方案1】：

您可以将 jquery .hover() 用作 h1 和 .prepend() 将 div 添加到 .tooltip 和 visibility: visible 类中，如下所示

$('h1').hover(function() {
  var tooltip = document.getElementsByClassName('tooltip');
  if(!tooltip[0]) {
    $('body')
    .prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
  }
});

.tooltip {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body> 
  ****
  <div style="overflow:hidden">
    <div class="box">
      **<h1>Short text</h1>**
    </div>
  </div>
</body>

希望这会对您有所帮助（y）。

【讨论】：

【解决方案2】：

由于您的 tooltip 不是 h1 的父级，因此您必须上两层，然后使用 tooltip 类获取上一个元素：

$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});

您可以使用hover() 方法来切换visibility：

$('h1').hover(function(){
    $(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
    $(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})

希望这会有所帮助。

$('h1').hover(function(){
  $(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
  $(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
  <div class="box">
    <h1>Short text</h1>
  </div>
</div>

【讨论】：

@norbertturekpl 这不是您要找的吗？

【解决方案3】：

当您将鼠标悬停到 H1 并且您想向祖父母添加工具提示时，这就是答案。

$('.box h1').mouseenter(function() {
   $(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});

//2nd option
$('.box h1').mouseenter(function() {
   $(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});

阅读本文以了解您要使用的事件/脚本W3schools.com的目标

【讨论】：