用:hover僞類代替js的hover事件

製做二級菜單要實現鼠標移動上去顯示子菜單，鼠標移出子菜單隱藏，或者其餘相似需求的地方，首先我會想到用jquery的hover事件來實現，如：

$(".nav").hover(function(){
    $("sub-nav").addClass("show");
},
function(){
    $("sub-nav").removeClass("show");
});

第一個function實現鼠標移上去的樣式，第二個function實現鼠標移開的樣式，因而就實現了簡單的下拉菜單功能。

以前一直這樣作沒有任何問題，然而直到昨天遇到一個問題：元素已經有click事件實現此功能時，再用hover事件實現同樣的功能，hover就會影響click事件，並去掉點擊事件的功能。舉個例子：

一個導航，爲當前點擊的導航添加current樣式，而後要實現鼠標移動到的當前元素也添加current事件，這時再用hover事件，經過點擊添加的current樣式會被hover事件影響，而且再次點擊添加樣式無效。

 

：hover僞類

糾結了半天，請教了一下同事，同事說沒有必要用hover事件啊，用僞類一下就解決了，因而在她的指導下豁然開朗。

.nav li.current,.nav li:hover{
  //css code      
}

current是當前須要的樣式，而後利用:hover與current共用一個樣式，簡單的一個思路的轉換就能解決問題了。同理，菜單顯示問題：

.nav:hover .sub-nav{
    display:block;
}    

總結：有時候須要轉換一下思惟，找到實現問題最簡單的方法，而不是一直糾結在問題中。