首页>新闻动态>网络新原创知识
鼠标经过更换图片及运用
在网站的若干特效中,好多js动态效果都让开发者望洋心叹,其实一些漂亮的效果也不一定都是js编程的,而是今天所说的鼠标经过后替换背景图片,不要小看该功能,真所谓小不点大能耐,灵活运用它,会给你带来意想不到的结果。

先来说说功能怎么实现,先上代码:

<style>
.dttt a{color:#666666; font-size:13px; display:block; line-height:49px;}
.dttt a:hover{color:#003399; background:url(img/li_2.jpg) no-repeat;}
</style>
<table width="207" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" height="49" class="dttt"><a href="#">经过后会替换背景哦</a></td>
  </tr>
</table>

很显然,上面就是利用a的hover选择器样式,利用鼠标经过链接时,改变a的样式来实现的,代码其实是级简单的,在a样式里,定义了文字颜色,字体大小,行距,而当鼠标经过时,加个背景图片,由于是选择器,会继承上面的属性,因而除了要改变的样式之外,其实都不要动,都会完整的继承下来的,上面的代码中,当鼠标经过时,只有背景图片与文字颜色发生改变,因而就直接定义这两样就行了,就这样简单。

那如何灵活运用呢?

不知道大家有没有看到这样的效果,当鼠标经过某个图片,或是某个文字,或是某段区域时,这段区域的背景突然形成了立体的效果,或是变了颜色,同时前端的文字大小与颜色也会发生改变,其实就是使用的鼠标经过后改变背景图片的样式,这个区域加个链接,采用a:hover实现。

从上面的想法对于灵活运用进行扩展下去,凡是鼠标经过的效果,在实际的网站建设过程中,都要留意一下,能不能利用a:hover来实现,因为利用它,实在是太简单了,代码又少,又节省时间,只是要辛苦美工一下,把背景图片p得好看一点。



下一条:自适应PC端与移动端的背景图片该如何布局
文章分类
热门文章
网站套餐 / 解决方案 / 客户案例 / 公司优势 / 新闻动态 / 主机域名 / 关于我们 / 返回首页
版权所有:南京希丁哥网络信息服务有限公司