|
购物专题 | 基金专题 | 性专题 | 饮食专题 | 教育专题 | 生活大参考 | 园林资讯 | 园艺库 | 健康专题 | |
| 论文专题 | 家庭养花 | 园林景观 | 盆景奇石 | 激情图库 | 农业资料库 | 园林古建 | 英文站 | 花卉栽培 |
在页面中我们希望用到较多的交互效果，一方面是为了视觉了需要，另一方面也体现了用户感受。我们常常制作鼠标的交互效果，当鼠标移到某一对象上时使其产生一定的变化，以达到提醒用户：Your Are Here！
链接的激活状态，就是一种典型的交互效果，我们都知道链接文字或图片等可以通过设置链接的Hover状态属性来完成设置。如果文字或图片本身并没有超链接。我们该如何编写这样的效果呢？鼠标经过时可以切换CSS可以实现吗？
我们可以利用小脚本来实现这样的效果，当然，它并不会消耗你很多的资源，不会占用你太多的空间，简单的一句话就可以搞定了。
onMouseOut="this.className=’aaa’" onMouseOver="this.className=’bbb’"
也就是设置鼠标移开和鼠标激活时，调用不同的CSS类，实现切换CSS以达到交互的效果。
我们看下面例子，下面的图片没有超链接，仅仅是插入的图片。我们可以实现鼠标移上去改变边框的效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://ww.it130.cn</title>
<style type="text/css">
<!--
.aaa{border:1px dashed #c00;}
.bbb{border:1px solid #666;}
-->
</style>
</head>
<body>
<img class="aaa" onMouseOut="this.className=’aaa’" onMouseOver="this.className=’bbb’"
src="http://www.it130.cn/skins/logo3.gif" title="www.it130.cn" />
</body>
</html>
我们再看下面的例子，这是一个h1标签，同样也没有超链接，我们可以做到当鼠标移上去时，改变背景颜色的效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.it130.cn</title>
<style type="text/css">
<!--
h1 {width:500px; height:40px; margin:30px auto 0 auto; border:1px solid #c00;
font-size:15px; line-height:40px; text-aligh:center; }
.aaa{background:#f0f0f0;}
.bbb{background:#ddd;}
-->
</style>
</head>
<body>
<h1 class="aaa" onMouseOut="this.className=’aaa’" onMouseOver="this.className=’bbb’">
IT130经典教程网－CSS教程频道</h1>
</body>
</html>
浙ICP备 ：07003766号 Copyright © 2001-2007 JUBAO163,All rights reserved. |
