Jquery：悬停时显示/隐藏 div。点击显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23321629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: show/hide div on hover. Show on click
提问by NvdB31
Let's assume I have a div with a .descriptionclass.
让我们假设我有一个带有.description类的 div 。
I would like div.descriptionto be shown when user hovers over another div, with the .imageclass.
div.description当用户将鼠标悬停在另一个 div 上时，我希望显示.image该类。
However, when user clicks on div.image, I would like div.descriptionto stay visible. So if user clicks on .image, the mouseleaveevent should not be applied.
但是，当用户点击 时div.image，我希望div.description保持可见。因此，如果用户单击.image，则mouseleave不应应用该事件。
Lastly, when user clicks on the .imageagain, the hover function should be activated again. So that when mouse leaves .image1, div.descriptionwill be hidden again.
最后，当用户.image再次单击时，应再次激活悬停功能。这样当鼠标离开时.image1，div.description将再次隐藏。
Hope you guys can help me!
希望大家帮帮我！
回答by Pankaj Sharma
var cancel = false;
$(".another").hover(function(){
$("div.description").show();
},function(){
if(!cancel)
$("div.description").hide();
});
$(".image").click(function(){
cancel = (cancel)?false: true;
});
回答by Mihai Matei
You may try something like this: http://jqversion.com/#!/CCvqpwh
你可以试试这样的：http: //jqversion.com/#!/CCvqpwh
$('.image').bind('mouseenter', function(){
$('.description').show();
}).bind('mouseleave', function(){
$('.description').hide();
}).click(function(){
if (!$(this).hasClass('clicked')){
$(this).addClass('clicked');
$(this).unbind('mouseleave');
} else {
$(this).removeClass('clicked');
$(this).bind('mouseleave', function(){
$('.description').hide();
})
}
});
回答by Manish Negi
Use this script
使用这个脚本
jQuery(document).ready(function() {
jQuery('.overlay').hide();
});
jQuery(document).ready(function() {
jQuery('.element, .element-1').hover(function() {
jQuery('.overlay').show();
},
function() {
jQuery('.overlay').hide();
});
});
回答by underscore
You can bind two events to same elements like bellow.And use separate function to get what your want
您可以将两个事件绑定到相同的元素，例如 bellow.And 使用单独的函数来获得您想要的
var myFunction1 = function() {
$('div.description').show();
}
var myFunction2 = function() {
// do whatever you want
}
$('div.image')
.click(myFunction1)
.mouseover(myFunction2)
