css3怎麼實現滑鼠滑過隱現效果
- 青灯夜游原創
- 2022-03-07 16:23:281872瀏覽
在css3中，可以利用「:hover」選擇器和display屬性來實現滑鼠滑過隱現效果，只需要給元素添加「元素:hover{display:none;}」樣式即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3實作滑鼠滑過隱現效果
在css3中，可以利用「:hover」選擇器和display屬性來實現滑鼠滑過隱現效果。
只需要使用「:hover」選擇器選取滑鼠滑上元素的狀態，並新增「display:none;」樣式，隱藏元素即可。
這樣在滑鼠滑上元素時，隱藏元素；滑鼠滑出元素時，顯現元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
/* display: block; */
}
div:hover{
display:none;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（學習影片分享：css影片教學）
以上是css3怎麼實現滑鼠滑過隱現效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue怎麼將陣列轉為字串下一篇：vue怎麼將陣列轉為字串