在DOM上存儲觸發的事件

Question

如何存儲在DOM中觸發的事件。假設我有一個div。我想在鼠標懸停時更改div的顏色。在鼠標移出後，再次將div的顏色更改爲上一個顏色。再次，當我點擊div顯示爲活動時更改顏色。

我的代碼如下：

​​3210

的問題是：

我怎麼能知道點擊事件已經在DIV被觸發，使鼠標移出事件不會觸發因爲它改變將顏色設置爲默認值，並且我無法顯示該div是否已點擊並處於活動狀態。

Answer 1

您不應該使用css方法進行樣式操作。你可以看到爲什麼 - 這是非常不方便的。如果您切換課程，則不會有任何問題。

$(document).on("mouseover", ".imgpayment", function() { 
 
    $(this).parent().addClass('active'); 
 
}); 
 

 
$(document).on("mouseout", ".imgpayment", function() { 
 
    $(this).parent().removeClass('active'); 
 
}); 
 

 
$(document).on("click", ".imgpayment", function() { 
 
    $(this).parent().toggleClass('selected'); 
 
    $(this).parent().find(".the-terms").prop('checked', true); 
 
    $("#submitBtn").removeAttr("disabled"); 
 
});

.active { 
 
    background: #89C4F4; 
 
} 
 
.selected { 
 
    background: #59ABE3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="imgpayment">TEST <small>Hover to highlight, click to select</small></div> 
 
</div>