什麼是onmouseout事件？

onmouseout是JavaScript的DOM事件，當鼠標指針移出指定元素時觸發。它常用於實現鼠標懸停效果的恢復，比如讓按鈕在鼠標移開時恢復原樣，或者隱藏提示框。

使用方法

HTML中使用

<元素 onmouseout="執行的JavaScript代碼">

JavaScript中使用

元素.onmouseout = function() {
  // 執行的JavaScript代碼
};

與相關事件的區別

事件

觸發時機

區別

onmouseout

鼠標移出元素區域（包括子元素）

會冒泡，鼠標移出子元素也會觸發

onmouseleave

鼠標完全離開元素本身（不包含子元素）

不冒泡，只在離開綁定元素時觸發

onmouseover

鼠標進入元素區域（包括子元素）

會冒泡

onmouseenter

鼠標精確進入元素本身（不包含子元素）

不冒泡

實用示例代碼

示例1：簡單圖片懸停效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>onmouseout示例</title>
  <style>
    img { transition: all 0.3s; }
  </style>
</head>
<body>
  <img 
    onmouseover="this.style.width='64px'; this.style.height='64px';" 
    onmouseout="this.style.width='32px'; this.style.height='32px';" 
    src="https://example.com/smiley.gif" 
    alt="笑臉" 
    width="32" 
    height="32">
  <p>鼠標移入圖片會變大，移出恢復原大小~</p>
</body>
</html>

示例2：按鈕懸停效果

<button 
  onmouseover="this.style.backgroundColor='#0066cc'; this.style.color='white';" 
  onmouseout="this.style.backgroundColor=''; this.style.color='';">
  懸停我看看
</button>

示例3：更實用的圖片切換效果（用函數封裝）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script>
    function bigImg(x) {
      x.style.width = "64px";
      x.style.height = "64px";
    }
    
    function normalImg(x) {
      x.style.width = "32px";
      x.style.height = "32px";
    }
  </script>
</head>
<body>
  <img 
    onmouseover="bigImg(this)" 
    onmouseout="normalImg(this)" 
    border="0" 
    src="https://example.com/smiley.gif" 
    alt="笑臉" 
    width="32" 
    height="32">
  <p>鼠標移入笑臉會變大，移出會變小哦~</p>
</body>
</html>