收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2566|回复: 8

[求助] 鼠标滑过显示背景图

[复制链接]
发表于 2010-9-21 16:38:30 | 显示全部楼层 |阅读模式
想做个鼠标滑过时,背景图显示的效果,可是鼓捣了半天都没弄出来,请教下各位这个该怎么写啊?谢谢了
原始效果和鼠标滑过效果如下图:
img.gif

页面中的代码如下:
<div>
<ul class="imgbox">
<li><a href="#"><img src="images/img1.gif" /></a><h2>文字</h2></li></ul>
</div>
发表于 2010-9-21 19:51:54 | 显示全部楼层
这是什么结构啊?
重新写下哈
结构:
<dl onmouseover="xx1(this)" onmuseout="xx2(this)">
    <dt><img src="xx.gif" width="" height=“” title="" alt="" /></dt>
    <dd><a href="">文字</a></dd>
</dl>
行为:
function xx1(boxFlag){boxFlag.className = "xx";}
function xx2(boxFlag){boxFlag.className= "";}
基本就这个原理,当然你也可以把函数整合。不想再细写了。
回复 支持 反对

使用道具 举报

发表于 2010-9-25 14:27:49 | 显示全部楼层
楼主~  试着把图片写成背景图吧~  那样感觉会简单点~
回复 支持 反对

使用道具 举报

发表于 2010-9-25 20:12:01 | 显示全部楼层
纯CSS能实现吗?
回复 支持 反对

使用道具 举报

发表于 2010-9-25 21:42:57 | 显示全部楼层
纯css可以实现但是IE6不支持
回复 支持 反对

使用道具 举报

发表于 2010-9-26 10:04:31 | 显示全部楼层
li a{width:300px;height:260px;display:block;}
li a img{width:200px;height:160px;}
img{border:0;}
li a:hover{background:url(838_2425143_641d8e838c4d19b.jpg);}
回复 支持 反对

使用道具 举报

发表于 2010-9-29 14:03:13 | 显示全部楼层
写了个例子,楼主可以参考一下,

test.rar

5.48 KB, 下载次数: 132

回复 支持 反对

使用道具 举报

发表于 2010-9-29 14:25:04 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2010-9-29 14:26:07 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-3 16:20 , Processed in 0.109099 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表