求高手指点一下这个jquery效果

webfeng · 发表于 2012-12-26 15:55:51

本帖最后由 webfeng 于 2012-12-26 15:57 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
 body{ font-family:"微软雅黑"; font-size:12px; color:#666666;}
 .con{ width:250px; margin:100px;}
 .con dl{ position:relative; width:250px; cursor:pointer;}
 .con dl dt{ background:url([url]http://www.ndsq.cn/template/ndsns/style/ndsq_110.png[/url]) no-repeat; line-height:26px; padding-left:19px;}
 .con dl dt span{ float:right; color:#000000; }
 .con dl.mous dd{ height:48px; background:url([url]http://www.ndsq.cn/template/ndsns/style/ndsq_7.png[/url]) repeat-x; border:1px solid #E6E9BA; padding:4px 0;}
 .con dl.mous dd .img{ float:right; display:inline; padding-right:4px;}
 .con dl.mous dd div strong{ font-size:16px; color:#8FAB00; padding-right:4px;}
  .con dl.mous dd .txt{ padding-left:5px;}
  .con dl.mous dd .txt span { font-size:16px;}
  .con dl.mous dd .txt p{ color:#000000; padding-top:5px;}
    .con dl.mous dd{ position: relative;}

</style>
</head>

<body>
   <div class="con">
      <div class="mop">
      <div class="qh">
           <div class="qh1">
              <dl class="mous">
                <dt style="background-position:0px 7px; "><span>550帖</span>什么都是浮云</dt>
                <dd>
                  <div>
                   <div class="img"><a href="#"><img src="http://www.ndsq.cn/uc_server/data/avatar/000/00/00/05_avatar_small.jpg" /></a></div>
                   <div class="txt"><strong>1</strong><span>什么都是浮云</span><p>帖子：100 金币2547</p></div>
                  </div>
                </dd>
              </dl>
              <dl class="mous">
                <dt style="background-position:0px -16px;"><span>550帖</span>什么都是浮云</dt>
                <dd style="display:none;"> 
                <div>
                   <div class="img"><a href="#"><img src="http://www.ndsq.cn/uc_server/data/avatar/000/00/00/05_avatar_small.jpg" /></a></div>
                   <div class="txt"><strong>2</strong><span>什么都是浮云</span><p>帖子：100 金币2547</p></div>
                  </div></dd>
              </dl>
              <dl class="mous">
                <dt style="background-position:0px -39px;"><span>550帖</span>什么都是浮云</dt>
                <dd style="display:none;"> 
                <div>
                   <div class="img"><a href="#"><img src="http://www.ndsq.cn/uc_server/data/avatar/000/00/00/05_avatar_small.jpg" /></a></div>
                   <div class="txt"><strong>3</strong><span>什么都是浮云</span><p>帖子：100 金币2547</p></div>
                  </div></dd>
              </dl>
           </div>
         
         </div>
      
      </div>
   </div>
  <script type="text/javascript">
    $(".mous:first dt").hide();
    $(".mous").mouseover(function(){
  $(this).find("dd").show().siblings().hide();
	}).mouseout(function(){
	$(this).find("dt").show().siblings().hide();
	
	})
   </script>

</body>
</html>

提示：您可以先修改部分代码再运行

webfeng · 发表于 2012-12-26 16:00:30

问题是 1.鼠标直接放在第二个列表上面第一个列表如何效果如何隐藏掉？ 2.鼠标离开时当前的列表效果还有

chaomao · 发表于 2012-12-26 16:18:10

告诉你原理，JQUERY写起来很简单，用一个事件即可，mouseover时，把有大图class的div的这个class干掉，当前div上加上这个class

webfeng · 发表于 2012-12-26 17:01:08

谢谢~ 搞定了哈哈

帐号		自动登录	找回密码
密码			注册

[求助] 求高手指点一下这个jquery效果