易网时代-编程资源站
Welcome
微信登录
首页
/
脚本样式
/
JavaScript
/
鼠标移入移出改变CSS样式的小例子
网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用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><script> window.onload = function （）{ var oDiv = document.getElementById（"div1"）; oDiv.onmouseover = function （） {oDiv.className = "hover" }; oDiv.onmouseout = function （） {oDiv.className = ""}};</script></head><body>鼠标移入改变样式，鼠标移出恢复。</body></html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
版权所有©石家庄振强科技有限公司2024
冀ICP备08103738号-5
网站地图
易网时代-编程资源站
易网时代-编程资源站