jQuery的悬停在DIV，对祖父母

我有一个很大的问题，我不能找到解决办法样式添加...jQuery的悬停在DIV，对祖父母

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

<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，我该怎么做？

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

来源

2016-12-15 norbertturekpl

使用'$（ 'H1'）最近（”提示 '）的CSS（{' 知名度 '：。'可见'}）' – kukkuz

是否需要HTML结构，还是可以将其更改为易于使用？ –

您可以使用jQuery .hover()为为h1和.prepend()与.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）。

来源

2016-12-15 17:18:43 pradeep1991singh

由于您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>

来源

2016-12-15 17:02:58

@norbertturekpl是不是你在找什么？ –

当你悬停到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

来源

2016-12-15 18:44:33

jQuery的悬停在DIV，对祖父母

回答

相关问题