在Web開發中,鼠標停留事件(css :hover)非常重要,它可以讓我們添加響應式操作到我們的網站中!比如當鼠標懸停在某個元素上時,我們可以改變它的背景顏色,字體顏色,甚至是它的大小和形狀等等。下面就是一個簡單的例子:
button { background-color: gray; color: white; border: none; padding: 10px; border-radius: 5px; } button:hover { background-color: white; color: gray; cursor: pointer; }
上面的代碼展示了如何在按鈕元素上添加懸停效果。當鼠標懸停在按鈕上時,按鈕的顏色將變成白色,字體顏色將變成灰色。此外,我們還添加了一個cursor屬性,這讓鼠標變成指向手形狀,使人們可以更加直觀地理解這是一個可以點擊的元素。
除此之外,我們還可以使用:hover偽類選擇器來改變其他元素的樣式。如下所示:
p { color: black; } p:hover { color: red; }
如上所示,當鼠標懸停在段落標簽(p標簽)上的時候,文本將變成紅色。你可以用這個方法來讓你的網站變得更加生動!