我的鼠標懸停，鼠標離開不起作用

$("document").ready(function() { 
     $('#eventTarget').bind("mouseover", changeColor);//This doesnt work 
     $('#eventTarget').bind("mouseleave", changeColor);//This doesnt work 

     $('#eventTarget').bind("click", function(){ //This code works 
       $('#eventTarget').unbind("mouseover", changeColor); 
       $('#eventTarget').unbind("mouseleave", changeColor); 
       $('#eventTarget').html("<p> click event handler Canceled</p>"); 
     }); 
    }); 
    function changeColor(evt) { 
     $('#eventTarget').toggleClass("highlight"); 
    }

CSS：我的鼠標懸停，鼠標離開不起作用

.highlight 
{ 
    background-color:Red 
} 
.normal 
{ 
    background-color:Yellow 

}

HTML體：

<div id="eventTarget" class="normal"> 
    HardCoreProg... 

* All activity 
* Subscriptions 
* Recommendations 
</div>

來源

2011-08-13 Dmitry Makovetskiyd

更改您的亮點CSS類，如下所示：

.highlight 
{ 
    background-color:Red !important; 
}

作爲獎勵，使用hover功能綁定以一行代碼對鼠標事件和鼠標事件進行處理：

$('#eventTarget').hover(changeColor, changeColor);

來源

2011-08-13 07:39:22 RoccoC5

哇..謝謝..它幫助了很多 –

中的JavaScript是好的，你的問題是highlight和normal CSS類互相爭鬥用於控制background-color。如果強制問題與!important：

.highlight { 
    background-color: Red !important 
}

然後正常工作：http://jsfiddle.net/ambiguous/LQqgb/

來源

2011-08-13 07:39:13

-1

堅持，您不需要使用!important只是爲了確保應用樣式定義。嘗試通過更加具體的方式爲CSS選擇器添加權重 - 它會按照您的要求進行操作，如果需要，您仍然可以在以後的CSS文件中覆蓋它。

#eventTarget.highlight { 
    background-color: red; 
} 

.normal { 
    background-color: yellow; 
}

有關CSS具體是如何工作的，看看這個文章就碎雜誌的更多信息：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

編輯：也許我應該鏈接到W3C的文件上，而不是專一？

來源

2011-08-13 07:49:57 ninjascript

我的鼠標懸停，鼠標離開不起作用

回答

相關問題