css怎麼實現滑鼠經過顯示離開隱藏效果
- 青灯夜游原創
- 2021-11-09 17:22:5810634瀏覽
實作方法：1、為元素新增「display: none;」樣式，將元素先隱藏起來；2、使用「:hover」選擇器和「display:block;」樣式設定滑鼠經過顯示效果，語法「父元素:hover 元素{display:block;}」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css實作滑鼠經過顯示離開隱藏效果
#實作想法：
先將元素隱藏起來；
然後使用「
:hover」選擇器設定滑鼠經過樣式--顯示元素
實現程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
}
span{
color: azure;
display: none;
}
div:hover span{
display:block;
}
</style>
</head>
<body>
<div>
<span>hello</span>
</div>
</body>
</html>效果圖：
（學習影片分享：css影片教學）
以上是css怎麼實現滑鼠經過顯示離開隱藏效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼清除背景圖片重複下一篇：css怎麼清除背景圖片重複