[英]on hover event hide the div
I want to hide the div 'sample' on hover event and need to show the div 'sample' on mouseout 我想在悬停事件上隐藏div“样本”,并且需要在mouseout上显示div“样本”
$('.secmenu').hover(function() { $('.sample').css('opacity', '0'); if ($('.secmenu').mouseleave()) { $('.sample').css('opacity', '1'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="secmenu">click</a> <div class="sample"> hello div sample text content hello div sample text content </div>
$('.secmenu').mouseenter(function() {//hide div on mouse enter $('.sample').hide(); }).mouseleave(function() {//show div on mouse leave $('.sample').show(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="secmenu">click</a> <div class="sample"> hello div sample text content hello div sample text content </div>
This can be done in css. 这可以在CSS中完成。 No need of jQuery: 不需要jQuery:
.secmenu:hover + .sample { display: none; }
<a href="" class="secmenu">click</a> <div class="sample"> hello div sample text content hello div sample text content </div>
Hide div on hover
and show div on mouseleave
event. 在hover
隐藏div,在mouseleave
事件中显示div。 You need to bind the mouseleave
event not write it in if
condition. 您需要绑定mouseleave
事件,而不要将其写入if
条件。
$(document).ready(function () {
$('.secmenu').hover(function () {
$('.sample').css('opacity', '0');
});
$('.secmenu').mouseleave(function () {
$('.sample').css('opacity', '1');
});
});
Try this: 尝试这个:
$('.secmenu').on('mouseenter',function() { $('.sample').css('opacity', '0'); }).on('mouseleave',function(){ $('.sample').css('opacity', '1'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="secmenu">click</a> <div class="sample"> hello div sample text content hello div sample text content </div>
If .sample
is immediate next sibling of .secmneu
you don't need JavaScript or jQuery for this. 如果.sample
是.sample
的下一个兄弟姐妹, .secmneu
不需要JavaScript或jQuery。 You can do it with pure CSS. 您可以使用纯CSS做到这一点。
.sample { transition: opacity 0.25s ease; opacity: 0; } .secmenu:hover + .sample { opacity: 1; }
<a href="" class="secmenu">click</a> <div class="sample"> hello div sample text content hello div sample text content </div>
According to jQuery's documentation : 根据jQuery的文档 :
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. 将一个或两个处理程序绑定到匹配的元素,以在鼠标指针进入和离开元素时执行。
.hover( handlerIn, handlerOut ) .hover(handlerIn,handlerOut)
So you can do it like this ( try it out ): 因此,您可以这样做( 尝试一下 ):
$( '.secmenu' ).hover(
function() {
$('.sample').hide();
},
function() {
$('.sample').show();
}
);
Which is equivalent to: 等效于:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.