网站开发之鼠标悬停简单特效实现（四）
生活随笔
收集整理的這篇文章主要介紹了
网站开发之鼠标悬停简单特效实现（四）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 鼠標懸停等操作和特效是網站設計非常重要的一個內容，常見的包括包括：鼠標移動懸停放大、鼠標懸停背景顏色變換、鼠標懸停下拉菜單顯示、圖片旋轉等特效，這篇文章主要是總結HTML和JavaScript中關于鼠標操作的一些特效，希望基礎性文章對你有所幫助，如果文章中存在錯誤或不足之處，還請海涵~
一. 鼠標懸停圖片放大效果
? ? ? ? 該功能主要是通過超鏈接<a>實現的，其中hover是表示懸停的效果：
<html> <head> <title>鼠標懸停放大</title> <style> #resize a:hover { position: absolute;}#resize a:hover img { width: 200px; height: 200px} </style> </head> <body><p>圖片懸停放大圖片</p><div id="resize"><a href="index.html"><img src="move.jpg" border=0 height="50" width="50" /></a></div> </body> </html> ? ? ? ? 其中運行的效果如下所示：
??
? ? ? ? 注意：hover表示懸停，圖片對應“a:hover img”。
二. 鼠標懸停背景顏色變換
? ? ? ? 核心代碼如下所示，主要通過鼠標懸停hover設置超鏈接變換。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠標懸停背景色變換</title> <style type="text/css">.navigation {margin:0 auto; /* 居中顯示 */text-align: center;width: 600px;height: 50px;margin-top: 20px;background-color: #FFC1E0;}h2 {float: left; /* 水平顯示 */background-color: #4F282D;height: 40px;width: 92px;font-family: "Palatino Linotype";font-weight: 400;text-align: center;padding-top: 0px;margin-top: 4px; /* 否則h2下移 */margin-left: 6px;}.navigation a {color: #1AFD9C; /* 超鏈接字體顏色 */text-decoration: none;}.navigation h2 a:hover {color: #39F; /* 超鏈接懸停變換顏色 */}.navigation h2:hover {background-color: #F9F900;} </style> </head> <body><div class="navigation"><h2><a href="#">首頁</a></h2><h2><a href="#">關于我</a></h2><h2><a href="#">相冊</a></h2><h2><a href="#">心情</a></h2><h2><a href="#">留言</a></h2><h2><a href="#">文章</a></h2></div> </body> </html> ? ? ? ? 運行結果如下所示，鼠標懸停前的效果：? ? ? ? 鼠標移動到背景上面的效果如下所示：
? ? ? ? 下面講解幾個重點：
? ? ? ? 1、在<div class="navigation">布局過程中，需要在CSS中設置"margin:0 auto;"，才能讓它居中顯示，這段代碼的含義是：第一個值就是元素的上下邊距0，第二個值就是左右邊距。當元素的定義了width屬性時，auto還能實現居中的效果。
? ? ? ? 2、在CSS中設置h2，需要添加"float: left;"，使其水平顯示，不增加該句的效果如下所示：
? ??
? ? ? ? 3、整個DIV布局代碼如下所示，h2會向下移動一段距離，這時CSS中通過"margin-top: 4px;"進行微調。
? ? ? ? 4、懸停的核心代碼如下所示，其中"text-decoration: none;"設置超鏈接無下劃線，然后是懸停在超鏈接a和字體h2的變換效果。注意冒號(:)和hover之間不能有空格，否則效果消失。
三. 鼠標懸停圖片旋轉
? ? ? ? 下面這段代碼是網上找到的，鼠標懸停圖片旋轉的特效，非常不錯，推薦使用。
? ? ? ? 旋轉參考地址：http://www.w3school.com.cn/cssref/pr_transform.asp
? ? ? ? PS：代碼忘記出處了，如果誰知道提醒我，我補加原文地址。
????
四. 鼠標懸停下拉菜單顯示
? ? ? ? 這段代碼主要是通過鼠標懸停，顯示下菜單的效果，希望對你有所幫助。
? ? ? ? 運行效果如下圖所示：
? ? ? ? 下面這段代碼是簡單實現鼠標懸停下拉菜單彈出：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>鼠標懸停下拉</title> <style>ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;}ul.menu li{line-height:25px}ul.menu li{float:left;margin-left:10px}ul.menu div{display:none;position:absolute;top:20px;left:0px}ul.menu div a{display:block}ul.menu li:hover div{display:block;} </style> </head> <body> <div id="main"><ul class="menu"><li><a href="#">Menu1</a><div><a href="#">menu11</a><a href="#">menu12</a></div></li><li><a href="#">Menu2</a><div><a href="#">menu21</a><a href="#">menu22</a></div></li><li><a href="#">Menu3</a><div><a href="#">menu31</a><a href="#">menu32</a></div></li></ul> </div> </body> </html> ? ? ? ? 顯示效果如下所示：
? ? ? ? 希望文章對你有所幫助，這是簡單總結了HTML鼠標常見的事件。
? ? ? ? 這個網站很多經典效果，但要登錄。網址：http://www.16css.com/menu/
? ? ? ? 下面是今天晚上發表的一篇QQ說說：
? ? ? ? 如果說當老師是我的第一個愿望，花了我18年時間，三個月前終于實現；那么，我的第二個愿望，想有一個自己的個人網站，最近也終于實現了，好開心啊，哈哈哈。
? ? ? ? 歡迎大家訪問: www.eastmountyxz.com
? ? ? ? 大四畢業那年我在去遵義支教的路上寫下這樣一首詩：
貴州眾美路迢迢， 未負勞心此一遭。 搜得破書三四本， 也堪將去教爾曹。 ? ? ? ? 期待自己的第三個愿望，網站目前只有首頁，太忙了還沒豐富進去，更多課程內容見我的CSDN。最后當然得感謝沈同學做的首頁，哈哈哈，沒白教這些學生，真心感謝。
但行好事，莫問前程。 待隨滿天李桃，再追學友趣事。 ? ? ? ? 同樣，待我已老，也會把自己的每個階段的人生都豐富到這個網站中去，感覺自己一輩子都與學校學生有關了吧！享受在學校里與同學，學生的生活，發自內心的enjoy。
? ? ? ? 日子長著，校園這壺老酒還需我慢慢品嘗。
? ? ? ? 有學生說我的第三個愿望是：找個妹子談談人生和我的第四個愿意，這個不錯。
? ? ? ? 有學生又說：我是他大學最好的老師
? ? ? ? 其實，我真的很榮幸認識自己的每一個學生，所以也會用心對待任何一個并堅持。
? ? ? ? 哎，又雞湯了，當老師后咋變成這樣了，fuck~
? ? ? ??(By:Eastmount 2016-11-06 半夜2點?http://blog.csdn.net/eastmount/?)
總結
以上是生活随笔為你收集整理的网站开发之鼠标悬停简单特效实现（四）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Python数据挖掘课程】五.线性回归
- 下一篇： 网站开发之DIV+CSS简单布局网站入门