维斯诺那个流行元素的特效

http://www.vsnoon.com/ 大家帮忙看看要怎么改。 我做到一半 那个z-index老是有问题<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/newcss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/popelements.js"></script><script type="text/javascript">
$(document).ready(function(){
for(i=0;i<14;i++)
{
$(".h3_thumb"+i).each(function (){$(this).hover(
function (){$(this).next().attr("style","width: 204px; display: block; left: 0px;");//$(this).next().addclass("over");
alert($(this).next());
},                                                                                                                                                                                                                                                                                                                                                                                                             
function (){$(this).next().attr("style","width: 10px; display: block; left: 0px;");
//$(this).parent().removeclass("over");
}
)
})}
});</script>
</head>
<body>  <div class="clr width960 bor1 martop10">
    <div class="wrapper">
      <div class="pop_elements">
        <h2 class="h2_popelements"><img src="images/new1.jpg" alt=""></h2>
        <ul class="ul_popelements lazybox">
          <li >
            <h3 class="h3_thumb0"><a href="#" target="_blank" title="搭扣"><img src="images/new2.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>搭扣</h4>
              <p>闪耀着时尚光泽的搭扣，是经常运用在鞋子上的时尚元素，表达着对潮流的追求，也表达着您独特的品味</p>
            </div>
          </li>
          <li >
            <h3 class="h3_thumb1"><a href="#" target="_blank" title="小绑带"><img src="images/new3.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px; overflow: hidden;">
              <h4>小绑带</h4>
              <p>意大利独有的圆形小绑带，是正装皮鞋的独特标志，展现男性优雅洒脱的个性。</p>
            </div>
          </li>
          <li >
            <h3 class="h3_thumb2"><a href="#" target="_blank" title="一字型"><img src="images/new4.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;" >
              <h4>一字型</h4>
              <p>朴素正规的一字型鞋面缝线，流行于本世界二十年代，传达的是男性正规场合的庄严肃穆，表现主人对着装讲究严格</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb3"><a href="#" target="_blank" title="镂花"><img src="images/new5.jpg" alt="" width="95" height="95"></a></h3>
            <div  style="width: 10px; display: block; left: 0px;">
              <h4>镂花</h4>
              <p>雕花般的潮流小孔，带有艺术性的遍布鞋身两侧，装饰性味道浓厚是经典尊贵鞋款的必备元素</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb4"><a href="#" target="_blank" title="温提普式"><img src="images/new6.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;" >
              <h4>温提普式</h4>
              <p>W"型的曲线像极了鹰的翅膀，雕花图案华丽而复古带给绅士们更加舒适轻便的感觉，是高档商务绅士的最爱</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb5"><a href="#" target="_blank" title="亮光鞋面"><img src="images/new7.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>亮光鞋面</h4>
              <p>整个鞋面干净整洁，无任何修饰，大方大气</p>
            </div>
          </li>
          <li class="right">
            <h3 class="h3_thumb"><a href="#" target="_blank" title="修身线"><img src="images/new8.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>修身线</h4>
              <p>全手工工艺缝制，细微之处尽显功厚，时刻体验一针一线带来的修身秀气</p>
            </div>
          </li>
          <li class="right">
            <h3 class="h3_thumb"><a href="#" target="_blank" title="超轻鞋底"><img src="images/new9.jpg" alt="" width="95" height="95"></a></h3>
            <div  style="width: 10px; display: block; left: 0px;">
              <h4>超轻鞋底</h4>
              <p>采用和制造飞机轮胎同类的橡胶发泡材料制作，超级轻便舒适</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb6"><a href="#" target="_blank" title="攒纹"><img src="images/new10.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>攒纹</h4>
              <p>精湛的手工攒纹工艺装饰鞋面，使鞋子更具层次感，更加凸显出头层牛皮的尊贵质感</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb7"><a href="#" target="_blank" title="弹力换气"><img src="images/new11.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>弹力换气</h4>
              <p>独有弹力气囊，采用单向阀原理，利用人体行走，输入新鲜空气，抽去湿气，完成鞋腔抽气排气功能</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb8"><a href="#" target="_blank" title="横搭条"><img src="images/new12.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px; overflow: hidden;">
              <h4>横搭条</h4>
              <p>一般出现在敞口鞋款正面，对鞋脸进行紧俏装饰</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb9"><a href="#" target="_blank" title="压花牛皮"><img src="images/new13.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>压花牛皮</h4>
              <p>压花牛皮包括牛颈纹，树纹，荔枝纹等，表现男人刚毅坚强的性格，其略带一丝野性的味道，更增加了您的独特魅力</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb10"><a href="#" target="_blank" title="经典回忆"><img src="images/new14.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;" >
              <h4>经典回忆</h4>
              <p>怀旧的造型，经典的鞋款，带回曾经的美好回忆中</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb11"><a href="#" target="_blank" title="U形线"><img src="images/new15.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;">
              <h4>U形线</h4>
              <p>经典的U形曲线勾勒出秀气的鞋身</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb12"><a href="#" target="_blank" title="反绒皮"><img src="images/new16.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;" >
              <h4>反绒皮</h4>
              <p>丰盈的质感让人有点触手可及，精致的外观给人尊贵优雅的感觉</p>
            </div>
          </li>
          <li>
            <h3 class="h3_thumb13"><a href="#" target="_blank" title="坦克底"><img src="images/new17.jpg" alt="" width="95" height="95"></a></h3>
            <div  style="width: 10px; display: block; left: 0px;">
              <h4>坦克底</h4>
              <p>坦克底花纹，给双脚定制了一双舒适的"足床"</p>
            </div>
          </li>
          <li class="right">
            <h3 class="h3_thumb"><a href="#" target="_blank" title="牛皮鞋底"><img src="images/new18.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;" >
              <h4>牛皮鞋底</h4>
              <p>牛皮鞋底是高档鞋的专属鞋底，专显高档奢华</p>
            </div>
          </li>
          <li class="right">
            <h3 class="h3_thumb"><a href="#" target="_blank" title="隐形增高"><img src="images/new19.jpg" alt="" width="95" height="95"></a></h3>
            <div style="width: 10px; display: block; left: 0px;" >
              <h4>隐形增高</h4>
              <p>内置的增高垫，让您挺拔自信</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  
</body></html>

解决方案 »

  1.   

    $(this).next().attr("style","width:204px ; display: block; left: 0px;");
    ==>
    $(this).next().css({ width: "204px", display: "block",left："0px"}); 
    这样修改样式.
      

  2.   

    这是原来的代码：
    var pop_st,$h3= $('.ul_popelements h3');
    $('.ul_popelements li:eq(6),.ul_popelements li:eq(7),.ul_popelements li:gt(15)').addClass('right');
    window.h3over = function (indx) {
    var obj = $h3.eq(indx),$li = obj.parent('li');
    if ($('.ul_popelements div').queue().length<=1) {
    $li.addClass('over').find('div').animate({'width':'202px','left':(($li.hasClass('right'))?'-192px':'0px')},'fast',function () {
    $(this).addClass('over');
    });
    }
    }
    $h3.mouseenter(function (){
    var indx = $h3.index($(this));
     pop_st = setTimeout('h3over('+indx+')',200);
    }).mouseleave(function (){
    clearTimeout(pop_st);
    $(this).next('div').removeClass('over').animate({'width':'10px','left':'0'},'fast',function () {
    $(this).parent('li').removeClass('over');
    })
    });  我想问下，window.h3over  是什么意思
      

  3.   

    window.h3over是个函数定义，
    比如你定义一个
    var aa= function(){ alert("ok") }
    也可以使用window.aa()调用或者window.aa= function(){ alert("ok") }
    定义