CSS滑鼠移動圖片切換功能
當滑鼠放在圖片上的時候可以切換為其他圖片,使用javascript可以實現,下面介紹一下如何使用CSS實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <title>CSS實現的圖片切換效果-螞蟻部落</title> <style type="text/css"> * { margin:0; padding:0; } ul li { list-style:none; } .nav { width:800px; height:40px; margin:150px auto; } .nav ul li { float:left; width:200px; } .nav ul li a:link, a:visited { display:block; width:190px; height:40px; background:url(images/wall_s1.jpg); } .nav ul li a:hover { background:url(images/wall_s2.jpg); } .nav ul li a:active { background:url(images/wall_s3.jpg); } </style> </head> <body> <div class="nav"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </body> </html>
以上程式碼實現了,當滑鼠放在連結上時,能夠實現圖片的切換功能。
相關文章
- CSS滑鼠懸浮圖片模糊切換效果CSS
- css滑鼠浮劃過切換按鈕背景圖片CSS
- css實現滑鼠滑過切換背景圖片程式碼CSS
- css滑鼠懸浮切換圖片滑鼠離開又恢復預設CSS
- CSS滑鼠經過連結切換背景圖片例項程式碼CSS
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- switchable圖片切換
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- JS動態相簿--隨滑鼠所至切換封面圖JS
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- 用原生JS實現 圖片輪播切換 功能JS
- 巧妙的有css合併圖片解決tab切換的背景圖片CSS
- 簡單介紹Vue實現滑鼠懸浮切換圖片srcVue
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- js滑鼠移動實現圖片立體滾動效果JS
- 2020 用html jQuery實現廣告輪播圖自動切換 滾動頁面 滑鼠懸浮下標且左右切換圖片HTMLjQuery
- CSS 奇思妙想 | 使用 resize 實現強大的圖片拖拽切換預覽功能CSS
- js圖片切換例項JS
- JavaScript 圖片切換展示效果JavaScript
- VS+Qt+Halcon——顯示圖片,實現滑鼠縮放、移動圖片QT
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- css切背景圖片(background-position)CSS
- jQuery手風琴圖片切換jQuery
- Canvas 畫圖 - 滑鼠移動圖形Canvas
- jQuery 圖片垂直切換效果詳解jQuery
- JS圖片Switchable切換大集合JS
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- 網頁Banner圖片切換js的使用網頁JS
- 搭建圖床-切換本站圖片至自建服務圖床
- 幻燈片放映模式切換windows terminal背景圖片模式Windows
- ubuntu命令切換滑鼠左右鍵Ubuntu
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS
- 點選按鈕實現圖片切換效果
- 馬賽克效果的JS圖片切換程式碼JS
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS