當我們使用CSS時，常常需要為我們的網頁添加一些特效來吸引用戶的注意力。鼠標經過框（Hover Box）就是其中之一。當用戶將鼠標放到一個鏈接或按鈕上時，會在其周圍出現一個框，隨著鼠標的移動而跟隨。

想要創建一個鼠標經過框，我們可以使用CSS中的:hover 偽類。當鼠標懸停在一個元素上時，我們可以應用一些修改該元素樣式的CSS規則。

.hover-box {
position: relative;
display: inline-block;
}
.hover-box:hover::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px solid #000;
}

在上面的代碼中，我們添加了一個:before 偽元素，用于創建鼠標懸停時出現的框。我們還為.hover-box 元素設置了定位和display 屬性，以確保偽元素可以相對于其父元素定位。鼠標經過時，偽元素會出現并覆蓋整個.hover-box 元素。

我們還可以使用CSS中的transition 屬性來為鼠標經過框添加過渡效果，例如讓框出現時以淡入的方式漸變。

.hover-box::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px solid #000;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.hover-box:hover::before {
opacity: 1;
}

在上面的代碼中，我們為框的偽元素設置了opacity 屬性。opacity：0意味著框最初是透明的，隨后使用transition 屬性使其在0.3秒的時間內由透明變為不透明，從而實現淡入效果。

通過使用以上的方法，我們可以輕松為網頁添加多種鼠標經過效果，為頁面增添更多的視覺效果和動態體驗。