CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？
JavaScript Code：
- <script language="javascript">
- function change(obj){
- obj.style.border="5px solid red";
- }
- function recover(obj){
- obj.style.borderColor="blue";
- }
- </script>
XML/HTML Code：
- <div id="menu" onmouseover="change(this)" onmouseout="recover(this)"><img src="wood.jpg" width="376" height="300"></div>
- 鼠标离开的效果如图：
鼠标放上去的效果：
方法二：css代码也可实现同样的效果，鼠标经过图片时出现半透明文字
css代码：
<style type="text/css">
body{background:#333}
img{border:none}
.wrap{margin:10px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #999;padding:2px}
.photo a:hover{border:1px solid #fff;text-decoration:none}
.photo a span {display:none;cursor:hand;text-align:center;font:bold 12px/30px Verdana, Arial;}
.photo a:hover span{width:400px;margin:0 2px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}页面代码：
<body>
<div class="wrap">
<div class="photo">
<a href="#">
<img src="wood.jpg" width="376" height="300">
<span>英国巨石阵，一直以来都是一个谜，现在它是一处著名的<a href="#" target='_blank'><u>旅游</u></a>景点。</span>
</a>
</div>
</div>
</body>鼠标移开的效果：
鼠标放上去的效果：
浙公网安备 33010602011771号