大家来看看这个功能是怎么实现的？

[hqywork]

这个网站中上部有四个图片，在鼠标入上去时就能变，但其上还有文字。
如果光是画片能变，我知道用mouseover,mouseout就可以，但现在在画片上还有文字（不是放在画片中的那种），
大家帮我看看，谢谢了。网站是：http://live.chuguo.tv/hqywork

[chenshuliang]

用div做的

• 打赏
• 举报

回复 赞

[曲滨_銘龘鶽]

不是什么 DIV 什么的
用 A 标签就可以实现因为 a 有鼠标移如移出的样式
A 标签用背景图、字就是那么写在里面的

那些块是 A 标签 display:block 的结果
然后再 a:hover 状态时改变背景图，和更换文字颜色


不懂自己看看 http://www.chuguo.tv/css/index.css

这种东西csdn 就有好多处

• 打赏
• 举报

回复 赞

[曲滨_銘龘鶽]

这东西不用写 js 代码的 css 全搞定！
一定都被 DW 带的那个切变按钮给误导了！

• 打赏
• 举报

回复 赞

[yixianggao]

看源码，少废话，哈

很明显是js+div

<li onmouseover="show('show_title')" onmouseout="hide('show_title')"><a href='http://www.chuguo.tv/LanguageLearn/TeacherTeamPage.aspx?Id=11'target='_blank'><img src='/Upload/images/ChuGuoIndex/bea5dea3-3c06-4f37-baeb-6e57dc5af513.gif' width='126' height='95' border='0' /></a><div id='show_title' style='position: absolute; display: none; background-color: #fff;color: #0096ff; filter: alpha(Opacity=80); width: 126px; left: 0px; top: 0px;z-index: 100'>汇通资深教师—唐冬青</div></li>

• 打赏
• 举报

回复 赞

[yixianggao]

晕，居然没换行，俺手动格式化一下，L@_@K

<li onmouseover="show('show_title')" onmouseout="hide('show_title')">
    <a href='http://www.chuguo.tv/LanguageLearn/TeacherTeamPage.aspx?Id=11'target='_blank'>
        <img src='/Upload/images/ChuGuoIndex/bea5dea3-3c06-4f37-baeb-6e57dc5af513.gif' width='126' height='95' border='0' />
    </a>
    <div id='show_title' style='position: absolute; display: none; background-color: #fff;color: #0096ff; filter: alpha(Opacity=80); width: 126px; left: 0px; top: 0px;z-index: 100'>
        汇通资深教师—唐冬青
    </div>
</li>

• 打赏
• 举报

回复 赞

[qawszx]

div + css

• 打赏
• 举报

回复 赞

[一品梅]

学习.

• 打赏
• 举报

回复 赞

[一品梅]

呵呵,8楼的这样岂不要绝对定位???

• 打赏
• 举报

回复 赞

[syc958]

ＴＯＯＬＬＩＰ

• 打赏
• 举报

回复 赞

[一品梅]

如果是动态数据布局,恐怕不能这样应用了吧...

• 打赏
• 举报

回复 赞

[yixianggao]

To: only_endure

肯定是样式表作了手脚！
http://www.chuguo.tv/css/index.css

加上这些就好了！

<style type="text/css">
.video_bg{ float:left; position:relative; margin-left:3px; width:432px; height:350px; background: url(../images/index-pic/video-bg.gif) no-repeat;}
.video_title{ position:absolute; top:5px; left:40px;}
.video_pic{ position:absolute; width:420px; top:35px; left:22px;}
.video_pic li{ float:left; position:relative; margin-right:5px; margin-bottom:4px;}
</style>

• 打赏
• 举报

回复 赞

[yjwang0621]

^_^

• 打赏
• 举报

回复 赞

[shagoo]

帮你分析网页了，接分：）

.index_block4{ position:relative; margin-top:1px; padding-top:15px; height:200px; background: url(../images/index-pic/block4-bg.gif) repeat-x; }
.index_block4 li{ float:left; margin-left:3px; width:188px; height:191px;}
.index_block4 li a{ display:block; width:188px; height:191px; text-indent:-7777px;}
.block4_1 a{ background: url(../images/index-pic/block1-1.jpg) no-repeat; }
.block4_1 a:hover{ background: url(../images/index-pic/block1.gif) no-repeat; }

.block4_2 a{ background: url(../images/index-pic/block2-1.jpg) no-repeat; }
.block4_2 a:hover{ background: url(../images/index-pic/block2.gif) no-repeat; }

.block4_3 a{ background: url(../images/index-pic/block3-1.jpg) no-repeat; }
.block4_3 a:hover{ background: url(../images/index-pic/block3.gif) no-repeat; }

.block4_4 a{ background: url(../images/index-pic/block4-1.jpg) no-repeat; }
.block4_4 a:hover{ background: url(../images/index-pic/block4.gif) no-repeat; }

这就是 那四块 变色 block 的 css ...

• 打赏
• 举报

回复 赞

[qawszx]

肯定是div的css起的作用

• 打赏
• 举报

回复 赞

[icpal]

.net论坛里不要讨论这么简单的美工问题
不懂就研究下别人的源代码
很明显是div做的嘛

• 打赏
• 举报

回复 赞

[hqywork]

不太明白，谁能帮帮我呀

• 打赏
• 举报

回复 赞

[shoushii]

CSS滤镜

• 打赏
• 举报

回复 赞

[shanshuiboy]

这不是交换图像吧?DW里就有!

• 打赏
• 举报

回复 赞

[qq22345111]

CSS的方法

• 打赏
• 举报

回复 赞

[WNASP]

这里不是美工啊！

• 打赏
• 举报

回复 赞