这可能看起来很简单,但不幸的是我不知道如何得到这个效果。
我有一个div,里面有一个子div,需要显示在父div的mouse-over
上。
子div中有另一个内容面板,该内容面板必须在单击子div时显示。
这两个工作得很好,但这里的问题是,我需要显示子div在鼠标离开只有当孩子被点击。
$(".wrapper").mouseover(function() {
$(this).find('.child').show();
}).mouseleave(function(){
$(this).find('.child').hide();
});
$(".child").click(function() {
$(this).find('span').show();
});
小提琴
我想这会对你有帮助。
Try this:
$(".wrapper").mouseover(function() {
$(this).find('.child').show();
}).mouseleave(function(){
if($(this).find('.child span').is(':visible') == false){
$(this).find('.child').hide();
}
});
$(".child").click(function() {
$(this).find('span').show();
});
工作小提琴在单击父类时添加一个类,检查它是否在鼠标左侧有该类:
$(".wrapper").mouseover(function() {
$(this).find('.child').show();
}).mouseleave(function(){
if(!$(this).hasClass('clicked'))
$(this).find('.child').hide();
});
$(".child").click(function() {
$(this).parent().addClass('clicked').find('.child span').show();
});
JSFiddle
try this:
var clicked=false;
$(".wrapper").mouseover(function() {
$(this).find('.child').show();
}).mouseleave(function(){
if(!clicked){
$(this).find('.child').hide();
}
});
$(".child").click(function() {
$(this).find('span').show();
clicked=true;
});