代码展示:鼠标经过表格时变换背景
先前也讲过诸如此类的知识,比如a:hover,通过a链接来实现更换背景,但有时需要更换背景的是某个div或是table,这时候使用a:hover显然就不合适。那具体怎么弄呢,其实很简单。

比如某个表格或是div的大小初始背景图片为111.jpg,鼠标经过以后要变换的背景是222.jpg,之后鼠标离开后,还是初始111.jpg背景,从来实现鼠标经过后的对背景的变换。准备材料见附图一:


代码展示如下:

<table width="450" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="308" width="450" style="background:url(111.jpg); color:#FFFFFF; font-family:'微软雅黑'; font-size:26px;" onmouseout="this.style.background='url(111.jpg)'" onmouseover="this.style.background='url(222.jpg)'">这是table里面的内容文字,其实这个已经不重要了,主要看鼠标经过时的背景变换的效果</td>
</tr>
</table>

放在dreamweaver里面的状态见附图二:


程序运行结果见附图三:


当然这个背景也可以换成背景颜色,代码如下:

<table width="450" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="308" width="450" style="background:#f7fcff;" onmouseout="this.style.background='#f7fcff'" onmouseover="this.style.background='#ddeffb'">这是table里面的文字,看鼠标经过时的背景颜色变换的效果,与上面图片的形式一致,就不附图给大家看了</td>
</tr>
</table>

上面是鼠标经过表格或是div或是某种区域变换背景的代码与运行,看懂了吗?其实不复杂,动手操作一下就会了。


下一条:名牌珠宝、首饰、化妆品模板案例欣赏
网站套餐/客户案例/公司优势/域名主机/企业邮箱/网站推广/关于我们/返回首页
版权所有:南京希丁哥网络信息服务有限公司