DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
關於JavaScript
>> 鼠標移入移出改變CSS樣式的小例子
鼠標移入移出改變CSS樣式的小例子
編輯：關於JavaScript
網頁上的某個區域，當鼠標移入時改變樣式，鼠標移出時自動恢復樣式，可以是一個圖片的邊框，也可以一段文字變色，掌握了原理，貌似可以做更加豐富生動的網頁互動效果，這裡主要是利用Js控制Hover標簽所在的DIV產生動作，也是學習的好范例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠標移入移出改變CSS樣式</title> <style> body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;border:10px solid #000;cursor:crosshair;} #div1.hover{color:red;background:#f0f0f0;border:10px solid red;} </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> 鼠標移入改變樣式，鼠標移出恢復。 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
js循環改變div顏色具體方法
下一頁:
js點擊更換背景顏色或圖片的實例代碼
關於JavaScript
JS實現頁面超時後自動跳轉到登陸頁面
JS代碼：復制代碼 代碼如下:<script language=javascript>&
easyUI實現(alert)提示框自動關閉的實例代碼
原理：使用js的定時任務函數setInterval設置時間，然後觸發關閉事件參數說明title：提示
Mac OS X 系統下安裝和部署Egret引擎開發環境
概述Egret基於TypeScript開發的，而TypeScript編譯工具tsc是基於
相關文章
JS鼠標懸浮圖片左右箭頭點擊訪問上下頁
JS獲取鼠標選中的文字
鼠標經過出現氣泡框的簡單實例
jQuery實現鼠標經過顯示動畫邊框特效
JS實現側邊欄鼠標經過彈出框+緩沖效果
鼠標經過tr時,改變tr當前背景顏色
HTML table鼠標拖拽排序功能
css cursor鼠標指針光標
ajax急速狂飙：開發99收藏夾體驗（二）鼠標拖動
CSS的各種屬性（鼠標 分級 容器）
JavaScript基礎知識
JSON基礎
正則表達式
關於JavaScript
JavaScript技巧
jQuery入門知識
AJAX入門
JavaScript綜合知識
小編推薦
javascript二維數組轉置實例
Node.js中require的工作原理淺析
JavaScript前端圖片加載管理器imagepool使用詳解
Javascript讀取cookie函數代碼
JS實現字符串轉駝峰格式的方法
HTML5canvas 繪制一個圓環形的進度表示實例
avalonjs實現仿微博的圖片拖動特效
IE及IE6浏覽器中判斷JS文件加載成功失敗的方法
如何減少浏覽器的reflow和repaint
使用js實現的簡單拖拽效果
熱門推薦
javascript實現類似於新浪微博搜索框彈出效果的方法
JS+HTML5手機開發之滾動和慣性緩動實現方法分析
淺談JavaScript的全局變量與局部變量
JS實現點擊圖片在當前頁面放大並可關閉的漂亮效果
JavaScript基礎篇（6）之函數表達式閉包
JavaScript中實現最高效的數組亂序方法
在新窗口打開超鏈接的方法小結
無阻塞加載js,防止因js加載不了影響頁面顯示的問題
學習JavaScript設計模式之代理模式
大家都在看
jquery.ajax之beforeSend方法使用介紹
textarea中的手動換行處理的jquery代碼
JQuery實現的圖文自動輪播效果插件
javascript自動改變文字大小和顏色的效果
javascript中clipboardData對象用法詳解
jQuery固定浮動側邊欄實現思路及代碼
隨鼠標上下滾動的jquery代碼
CSS top屬性用法揭秘
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved