这可能看起来很简单,但不幸的是我没有得到如何产生这种效果。
我有一个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();
});
答案 0 :(得分:1)
我认为这会对你有帮助。
试试这个:
$(".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();
});
答案 1 :(得分:0)
在点击时在父级上添加一个类,检查鼠标离开时是否有该类:
$(".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();
});
答案 2 :(得分:0)
试试这个:
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;
});