帮忙分析下淘宝商城的类表页面得:hover效果

neverned 楼主

帮忙分析下淘宝商城的类表页面得:hover效果
淘宝还是蛮有些技术含量得啊，搞了一天没有研究出他具体是怎么在实现得
效果地址：http://list.mall.taobao.com/1343/g-s-----40-0--1343.htm
希望高手能指点下啊。

macji

就
a:hover{
...
}

neverned 楼主

你看了没有啊

lovesdh

就简单的加了个JS的嘛

下面有个预加载的信息
<div class="other-info"></div>

再在<div class="pic"></div> 或者"pic" 下面的<a>便签上加个鼠标移上去的事件，定位"other-info" 就那么回事。。。。

其实直接用a:hover tag{ } 也可以实现.....

neverned 楼主

我做得IE6没有效果啊

neverned 楼主

.pic:hover在IE6是行不通得啊
我就郁闷在这里了啊~

jxdawei

如果你抛开IE6不管已经完成了那个效果的话，那就OK了，提示你一下。
看页面源代码中有一行这样的js来专门针对IE6对hover伪类的支持。

1. <script type="text/javascript" src="http://assets.mall.taobao.com/assets/j/ie6hover.js?t=20080422.js"></script>

复制代码

看一下这个javascript的代码，大致的思路是：在IE6下用javascript的onmouseover和onmouseout来弥补ie6对hover的不支持。

[ 本帖最后由 jxdawei 于 2008-5-13 20:36 编辑 ]

cuikai

http://assets.mall.taobao.com/assets/j/ie6hover.js?t=20080422.js

1. TB.namespace("ark.ie6hover");TB.ark.ie6hover=(function(){var A=function(B){B.onmouseover=function(){$D.addClass(this,"hover")};B.onmouseout=function(){$D.removeClass(this,"hover")}};return{init:function(){if(TB.bom.isIE6){var E=$D.getElementsByClassName("ark:list");if(!E){return }for(var D=0;D<E.length;D++){var C=E[D].getElementsByTagName("li");for(var B=0;B<C.length;B++){if(C[B].parentNode!=E[D]){continue}A(C[B])}}}}}})();$E.onDOMReady(function(){TB.ark.ie6hover.init()});

复制代码

cuikai

啊！  大伟已经回复啦？

neverned 楼主

原来是用JS弄得啊谢谢了啊~
研究了一天IE6了
感谢感谢~~~

一直以为用hack解决，原来走错路了

晕，这段JS怎么用啊~

大伟修改说明：有话一气说完，别一帖帖地顶，还有，不要说脏话，我已经去掉了部分不文雅字眼！

jxdawei

1. TB.namespace

复制代码

看这个就知道，你光用这个js还是不够的，它使用的应该是YUI和淘宝自己的javascript框架。整体性的。
你可以根据这个思路自己去编写一个简单的js。
注意在html中有一个这样的class：

1. <ul class="product-list ark:list">....</ul>

复制代码

再看这段js，就能发现首先：

1. getElementsByClassName("ark:list");//这个getElementsByClassName()方法不是javascript自带的，是自己补充的。

复制代码

来获取目标，然后：

1. for (){
   
2. //循环遍历列表子项，逐个添加onmouseover、onmouseout事件
   
3. }

复制代码

neverned 楼主

爱死你了版主，这样写明白多了，虽然可以丢给程序处理，但我还是喜欢自己研究下。

oivp

老早看国外有个HTC版的
可以应用在地图标注、多级菜单等常用功能上

yunsi600

高手能把这个效果的JS放出来吗? 我喜欢收集这些效果但自己不会写...

jxdawei

给一个简单的demo：
http://www.iwcn.net/demo/ie6hover/

其实jQuery中已经有专门的针对hover处理的了，看上边的代码！

bc1998

这东西不用js也能办到啊,用伪类的子类选择器啊!但是可能要牺牲标签的标准化

dowhatyouwant

看这里：D
http://5key.net/demo/image-mouseover/

blank

原帖由 jxdawei 于 2008-5-13 21:16 发表
TB.namespace
看这个就知道，你光用这个js还是不够的，它使用的应该是YUI和淘宝自己的javascript框架。整体性的。

使用的是YUI框架，TBra只是用YUI对淘宝一些常用的效果和某些扩展进行了补充。

blank

原帖由 dowhatyouwant 于 2008-6-16 15:21 发表
看这里：D
http://5key.net/demo/image-mouseover/

这样的结构是不推荐的，强烈不推荐内联元素包含块级元素。
从另外一个角度来看：当IE6没人使用的时候，你是否需要更改你的结构代码呢？因为那是非A元素已经支持hover。