Question

场合
我有一个div，当你的鼠标结束时，另一个出现了另一个div。当你用鼠标离开div时，它会消失。但是当你点击它时，即使你用鼠标离开div也必须保持不变。

问题
我如何使.click超过规则.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");
});

Answer 1

您需要一个标志来保存状态：

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

Answer 2

您可以将css用于mouseenter和mouseout，并添加点击事件以切换状态。

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

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

如何结合鼠标悬停，鼠标移动和点击。没有.mouseout毁灭.click

2 个答案: