鼠标移入移出改变CSS样式的小例子
5星 · 超过95%的资源 23 浏览量
2020-09-05
04:05:52
上传
评论
收藏 32KB PDF 举报 
鼠标移入移出改变鼠标移入移出改变CSS样式的小例子样式的小例子
本篇文章介绍鼠标移入移出改变CSS样式的实例演示，需要的朋友可以参考一下
网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握
了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用Js控制Hover标签所在的DIV产生动作，也是学习的好范
例。
<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;backg
round:black;border:10px
solid
#000;cursor:crosshair;}
#div1.hover{color:red;bac
kground:#f0f0f0;border:1
0px solid red;}
</style>
<script>
window.onload = function
()
{
var oDiv =
document.getElementByI
d("div1");
oDiv.onmouseover =
function ()
{
oDiv.className =
"hover"
};
oDiv.onmouseout =
function ()
{
oDiv.className = ""
}
};
</script>
<div id="div1">鼠标移入
改变样式，鼠标移出恢
复。</div>
运行代码
复制代码
保存代码
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
- 1
- 2
前往页