-
网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用Js控制Hover标签所在的DIV产生动作，也是学习的好范例。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
-
<html xmlns="">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></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>
-
<div id="div1">鼠标移入改变样式，鼠标移出恢复。</div>
-
</body>
-
</html>
阅读(727) | 评论(0) | 转发(0) |
