首页 新闻 搜索 专区 学院

请问这种效果怎么弄啊,原来chinaren里面用过,是显示头像的!!!记录过,现在找不到了

0
悬赏园豆:80 [已解决问题] 解决于 2012-08-28 16:19

鼠标经过时变成

wys0301mm的主页 wys0301mm | 初学一级 | 园豆:12
提问于:2012-01-04 00:44
< >
分享
最佳答案
1

多种方式可以实现吧
一:tootip方式静态div的切换;
二:异步加载也可以呀,onmouseover 后加载也行;

收获园豆:80
蠕虫 | 菜鸟二级 |园豆:305 | 2012-01-04 19:00

jqurey的方式,还没搞懂!!!!有谁会啊

我参考了淘宝,但是小图片的话,不怎么好弄!

wys0301mm | 园豆:12 (初学一级) | 2012-01-04 23:11
其他回答(4)
0

不太明白你要的效果

画方软件 | 园豆:778 (小虾三级) | 2012-01-04 15:01
0

每个图片两个DIV。 一个div只有图片, 一个div是图片和文字加背景,

第二个DIV默认隐藏。

鼠标经过第一个DIV,隐藏本身,显示第二个DIV。

鼠标离开第二个DIV,隐藏本身,显示第一个DIV

寒风吹过 | 园豆:149 (初学一级) | 2012-01-04 18:02
0

用一DIV 里面放图片,鼠标经过时把这个DIV宽度和背景加上,移开时恢复原样。

文旺 | 园豆:210 (菜鸟二级) | 2012-01-05 10:22
0


.greater { margin: 15px 5px 5px 15px; }


.sub-greater a { width: 40px; height: 40px; display: block; float: left; position: relative; margin: 0 8px 8px 0; }


.sub-greater .pic { position: absolute; top: 0; left: 0; z-index: 100; width: 30px; height: 30px; display: block; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; }


.sub-greater .pic img { width: 46px; height: 47px; }

.sub-greater .name { position: absolute; color: #333; display: block; overflow: hidden; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; text-align: center; }

 

.sub-greater a:hover .name { top: -18px; left: -38px; z-index: 101; padding: 4px 6px; height: 20px; line-height: 20px; overflow: hidden; background-color: #fff; border-radius: 2px; box-shadow: 0 0 3px #000; min-width: 90px; opacity: .8; }


#imagephonewell { width: 964px; height: 210px; clear: both; margin: 55px auto 0 auto; background-repeat: no-repeat; text-align: left; background-color: #FFFFFF; }


#imagewell { width: 964px; height: 29px; clear: both; background-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #CCCCCC;  }

#phonewell { width: 699px; height: 175px; display: inline; float: left; background-repeat: no-repeat; text-align: left;}

#uselogin { width: 265px; height: 173px; display: inline; float: left; background-image: url('../xmimage/reg_bg.jpg'); background-repeat: no-repeat; text-align: left;   padding-top:3px; }

#usname { width: 208px; height: 28px; margin-left: 36px; margin-top: 46px; display: inline-block; background-repeat: no-repeat; text-align: left; }

#uspassword { width: 208px; height: 26px; margin-left: 36px; margin-top: 0px; display: inline-block; background-repeat: no-repeat; text-align: left; }

#loginbutton { width: 208px; margin-left: 16px; display: inline-block; background-repeat: no-repeat; text-align: right; }

 

程序里: <div id="phonewell">
                <div class="greater" style="margin-left: 5px">
                    <div class="sub-greater">
                        <asp:Repeater ID="Repeater3" runat="server">
                            <ItemTemplate>
                                <a target="_blank" href="<%#Eval("wjtext") %>"><span class="pic">
                                    <img src="<%#Eval("zpimage") %>"></span><span class="name"><%#Eval("zpname")%></span></a>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>

wys0301mm | 园豆:12 (初学一级) | 2012-08-28 16:18

直接css鼠标事件,解决战斗

支持(0) 反对(0) wys0301mm | 园豆:12 (初学一级) | 2012-08-28 16:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册