用: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;
}    

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