我如何结合鼠标悬停，鼠标和点击。没有.mouseout破坏.click

情况
我有一个div，当你的鼠标在这个div另一个出现。当你用鼠标离开div时消失。但是当你点击它时，即使你用鼠标离开div，它也必须保留。我如何结合鼠标悬停，鼠标和点击。没有.mouseout破坏.click

问题
我该如何使.click over rule .mouseout？

代码

$('.btn-morgen').mouseover(function() { 
    $('#mapster_wrap_0 img').attr("src", '/media/ae/ae24c4cd276383e1474c6ebe93a127f3/950/kaartje.png'); 
    $('.gebied1').css("display","block"); 
    $('.gebied2').css("display","none"); 
}); 
$('.btn-singel').mouseover(function() { 
    $('#mapster_wrap_0 img').attr("src", '/media/fe/feb86620fba224e28d5c7f4bf6307ece/950/kaartje.png'); 
    $('.gebied1').css("display","none"); 
    $('.gebied2').css("display","block"); 
}); 
$('#mapwrapper').mouseout(function() { 
    $('#mapster_wrap_0 img').attr("src", '/media/c8/c88c72323acecefbab1ec173c5eb0b1a/950/kaartje.png'); 
    $('.gebied1').css("display", "none"); 
    $('.gebied2').css("display", "none"); 
}); 
$('#mapwrapper').mouseout(function() { 
    $('#mapster_wrap_0 img').attr("src", '/media/c8/c88c72323acecefbab1ec173c5eb0b1a/950/kaartje.png'); 
    $('.gebied1').css("display", "none"); 
    $('.gebied2').css("display", "none"); 
}); 
$('.btn-morgen').click(function() { 
    $('#mapster_wrap_0 img').attr("src", '/media/ae/ae24c4cd276383e1474c6ebe93a127f3/950/kaartje.png'); 
    $('.gebied1').css("display","block"); 
    $('.gebied2').css("display","none"); 
}); 
$('.btn-singel').click(function() { 
    $('#mapster_wrap_0 img').attr("src", '/media/fe/feb86620fba224e28d5c7f4bf6307ece/950/kaartje.png'); 
    $('.gebied1').css("display","none"); 
    $('.gebied2').css("display","block"); 
    $('.btn-morgen').css("background-color","f4f0d3"); 
});

来源

2016-12-07 Mike Lammers

哈克方法可能是这样的一个全球性的布尔值，其中要检查在mouseout事件的价值如果它是假的，并将其设置为true，则点击它。 –

请尽可能提供html和js代码，jsfiddle或snippet甚至更好，这样用户可以快速进入您面临的问题，谢谢 –

你需要一个标志，保存状态：

(function() { 
    var clicked=false; 
    $myDiv.click(function() { 
     //logic to show other div 
     clicked=!clicked; 
    }); 
    $myDiv.mouseout(function() { 
     if (!clicked) { 
      //code to hide the div 
     } 
    }); 
})();

来源

2016-12-07 08:28:37

可以使用css为mouseenter和mouseout并添加一个点击事件来切换状态。

注：在css选择器中的+意味着下一个兄弟。如果它不是下一个兄弟，用~因为这将检查所有的兄弟姐妹

$('.main').on("click", function(){ 
 
    $(this).siblings('.tile').removeClass('hide'); 
 
})

.main{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px solid gray; 
 
} 
 
.main:hover ~ .hide.tile{ 
 
    display: block; 
 
} 
 
.tile{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid gray; 
 
} 
 
.hide{ 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="main">main container</div> 
 
<div >Dummy</div> 
 
<div class="tile hide">tile</div>

来源

2016-12-07 08:29:30 Rajesh

我如何结合鼠标悬停，鼠标和点击。没有.mouseout破坏.click

回答

相关问题