Question

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

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

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

如果我在h1，我想在课程工具提示div中添加visibility:visible，我该怎么做？

我希望你找到解决这个问题的方法。

Answer 1

由于您的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'});
})

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用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）。

Answer 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

的目标

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

3 个答案: