沒有事件的Mouseenter和mouseleave

Question

我剛剛開始學習一個月前剛剛開始學習Jquery和Javascript，我不得不說，我對你能用它做的一切印象深刻！我有這段代碼，但我無法正常工作，所以我決定在這裏問一些更有經驗的代碼。這是事情：我試圖複製jquery中發現的mouseenter和mouseleave事件。我設法得到了第一個活動，但我無法獲得第二個活動。當光標進入紅色的div到藍色時，div顏色應該改變，當它退出時再次變回紅色。下面是代碼：

的div元素的樣式：

#offsetElement{width: 100px; height: 100px; position: absolute; background: red; top: 100px; left: 100px;} 

jQuery代碼

$(document).mousemove(function(e){ 
offset = $("#offsetElement").offset(), 
offWidth = $("#offsetElement").width(), 
offHeight = $("#offsetElement").height(), 
offX = e.pageX - offset.left , 
offY = e.pageY - offset.top ; 

if ((offX > 0) && (offX > offWidth)){ 
    return; 
} 
else if ((offY > 0) && (offY > offHeight)){ 
    return; 
} 
else if ((offX < 0) && (offY > -offHeight)){ 
    return; 
} 
else if ((offY < 0) && (offX > -offWidth)){ 
    return; 
} 

$("#offsetElement").css("background","blue"); 

}); 

的div元素：

<div id="offsetElement"></div> 

Answer 1

你可以只使用CSS。這很簡單：

#offsetElement { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    background-color: red; 
    top: 100px; 
    left: 100px; 
} 

#offsetElement:hover { 
    background-color:blue; 
}