我如何結合鼠標懸停，鼠標和點擊。沒有.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

回答

相關問題