Fatal编程技术网
  • javascript/
  • Javascript Jquery将鼠标悬停在div上，在祖父母上添加样式

Javascript Jquery将鼠标悬停在div上，在祖父母上添加样式

javascript jquery html css

Javascript Jquery将鼠标悬停在div上，在祖父母上添加样式,javascript,jquery,html,css,hover,Javascript,Jquery,Html,Css,Hover,我有一个大问题，我找不到解决办法 我必须做工具提示，例如，我们有以下结构： <body> **<div class="tooltip">Long text ...</div>** <div style="overflow:hidden"> <div class="box"> **<h1>Short text</h1>** </div> </div>

我有一个大问题，我找不到解决办法

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

<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
的父级，因此您必须提升两个级别，然后使用类
工具提示
获取上一个元素：

$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
您可以使用
hover（）
方法切换
可见性
：

$('h1').hover(function(){
    $(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
    $(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
希望这有帮助

$（'h1'）。悬停（函数（）{
$（this.parent（）.parent（）.prev（'.tooltip'）.css（{'visibility'：'visible'}）；
}，函数（）{
$（this.parent（）.parent（）.prev（'.tooltip'）.css（{'visibility'：'hidden'}）；
})

长文本。。。
短文
您可以使用jquery对as
h1
和类
添加
div
。工具提示
和
可见性：可见



$（'h1'）。悬停（函数（）{
var tooltip=document.getElementsByClassName（'tooltip'）；
如果（！工具提示[0]）{
$（“正文”）
.prepend（'长文本…'）；
}
});

。工具提示{
可见性：隐藏；
}



****
**短文**

当您将鼠标悬停到H1并希望向父代添加工具提示时，这将是答案


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

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



阅读此文，了解您希望使用事件/脚本的目标是什么？
使用
$（'h1'）。最近（'.tooltip'）。css（{'visibility'：'visible'}）
是需要HTML结构，还是可以将其更改为更易于使用？@norberturekpl这不是您想要的吗？