CSS是前端開發必不可少的重要技術之一，而控制鼠標事件也是CSS中不可或缺的一部分，它讓我們的網站更加動態、有趣、交互性更高。下面就讓我們一起來看一下CSS如何控制鼠標事件。

首先，要控制鼠標事件必須使用CSS選擇器，利用選擇器可以選擇HTML元素來進行樣式修改。

/*CSS選擇器格式*/
selector {
property: value;
}

其中，還有一些偽類選擇器可以用來控制鼠標事件：

• :hover - 鼠標懸停時觸發
• :active - 鼠標點擊時觸發
• :focus - 元素獲取焦點時觸發

/*偽類選擇器格式*/
selector:pseudo-class {
property: value;
}

接下來，舉幾個例子來說明如何使用上述選擇器來控制鼠標事件。

/*使用:hover控制鼠標懸停狀態*/
a:hover {
color: red;
text-decoration: underline;
}
/*使用:active控制鼠標點擊狀態*/
button:active {
background-color: green;
border-color: white;
}
/*使用:focus控制獲取焦點狀態*/
input:focus {
outline: none;
border-color: blue;
}

通過使用CSS選擇器和偽類選擇器，我們可以方便地控制鼠標事件，讓網站更加生動、活潑。當然，還需要注意選擇器的優先級和兼容性，才可以讓我們的網站在各種設備和瀏覽器上呈現出最佳的效果。