不,您無法直接從CSS觸發JavaScript。
你可以做的是使用CSS選擇器來查找你想要以這種方式觀看的元素,然後觀察鼠標事件。標準事件是mouseover
和mouseout
,但它們可能有點棘手,因爲它們會冒泡(例如,只要鼠標離開任何後代元素,您就會獲得mouseout
)。然而,使用適當的邏輯,它們不會不好處理,事實上,如果您有很多這些,您可能想使用mouseover
和mouseout
,而不是下面的替代方法,因爲您可以將它們設置爲父容器,然後計算出涉及哪個後代元素,在某些情況下可能更簡單(而其他元素更復雜)。
IE提供了mouseenter
和mouseleave
,它們更容易處理,因爲它們不會冒泡,但是(當然)是IE特有的。這些都非常方便,即使在不支持的瀏覽器中,框架也開始支持它們;例如,Prototype和jQuery提供了它們,如果其他框架也適用,我不會感到驚訝。 jQuery的還提供了方便的hover
功能,這將是非常接近你想要什麼:
// jQuery
$(".first-nav li a").hover(
function(event) {
// The mouse has entered the element, can reference the element via 'this'
},
function (event) {
// The mouse has left the element, can reference the element via 'this'
}
);
...這是真的只是設立mouseenter
和mouseleave
處理程序的快捷方式,不過,奇妙簡潔。
在原型是非常相似:
// Prototype
$$(".first-nav li a")
.invoke("observe", "mouseenter", function(event) {
// The mouse has entered the element, can reference the element via 'this'
})
.invoke("observe", "mouseleave", function(event) {
// The mouse has left the element, can reference the element via 'this'
});
(OT:在這兩種情況下,我使用匿名內聯函數表達式只是爲了避免給您必須使用命名函數的印象我總是推薦儘管使用生產代碼中的命名函數)。
@Qutbuddin Kamaal:你應該考慮使用像jQuery或Prototype這樣的CSS庫。它們允許您使用CSS選擇器執行查詢,並且您可以立即爲單個事件處理程序設置單個事件處理程序(這看起來像是我想要做的)。 – 2010-03-15 11:21:11
恩,我的意思是JS庫(現在編輯已經太晚了,哈哈) – 2010-03-15 11:54:30