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

Question

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

Answer 1

不是什么 DIV 什么的
用 A 标签就可以实现因为 a 有鼠标移如移出的样式
A 标签用背景图、字就是那么写在里面的那些块是 A 标签 display:block 的结果
然后再 a:hover 状态时改变背景图，和更换文字颜色
不懂自己看看 http://www.chuguo.tv/css/index.css这种东西csdn 就有好多处

Answer 2

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

Answer 3

看源码，少废话，哈很明显是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>

Answer 4

晕，居然没换行，俺手动格式化一下，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>

Answer 5

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>

Answer 6

帮你分析网页了，接分：）
.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 ...

Answer 7

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