1   <div class="maintip"><a href="#">服装类</a></div>
 2   <div class="tips">
 3      <p>
 4      <a href="http://www.baidu.com">各种衣服啊</a>
 5      </p> <br/><br/><br/><br/><br/><br/><br/><br/><br/>
 6      <p>
 7      <a href="http://www.baidu.com">来百度一下找衣服啊</a>
 8      </p>
 9   </div>
10
11   <div class="maintip">家电数码</div>
12   <div class="tips">
13      <p>
14      M8卖那么贵，HTC请你继续flop好么
15      </p>
16   </div>
17
18   <div class="maintip">美食</div>
19   <div class="tips">
20      <p>
21      葡萄酒，白酒，啤酒 <br/><br/><br/><br/><br/><br/><br/><br/><br/>
22      我特么只是想把这个框拉长
23      </p>
24   </div>
25
26   <div class="maintip">玩具</div>
27   <div class="tips">
28      <p>
29      <a href="http://www.123.com">智力魔方啊神马的你要的都有哦</a>
30      </p>
31   </div>

View Code

 1 <style type="text/css">
 2 body{
 3     margin:100px;
 4 }
 5 .maintip{
 6     position:relative;
 7     z-index:1;
 8     border:1px solid #E5D1A1;
 9     text-align:center;
10     width:200px;
11     background:#FFFDD2;
12     height:35px;
13     line-height:30px;
14 }
15 .tips{
16     position:absolute;
17     z-index:2;
18     width:800px;
19     min-height:100px;
20     border:1px solid #E5D1A1;
21     background:#fff;
22     display:none;
23 }
24 </style>

View Code

 1 $(function(){
 2
 3     $(".maintip").each(function(index){   //遍历A部分，注意这里绑定事件用了index参数
 4         $(this).mouseover(function(){   //鼠标经过A时触发事件
 5             var obj=$(this).offset();   //获取被鼠标经过的A的偏移位置，offset()是个好东西，不懂的朋友得去了解下
 6             var xobj=obj.left+200+"px"; //后面要让B水平偏移的距离，这里的“200”是可自定义的，当然你可以改为$(this).width()来获得跟A一样的宽度
 7             var yobj=obj.top+"px";     //后面要让B垂直偏移的距离
 8             $(this).css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"});  //A改变样式，变为选中状态的效果
 9             $(".tips:eq("+index+")").css({"left":xobj,"top":yobj}).show();   //对应的（这里利用了索引）B改变样式并显示出来
10             })
11         .mouseout(function(){     //鼠标离开A时触发的事件
12             $(".tips").hide();     //B隐藏
13             $(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})   //A变回原始样式
14         })
15     })
16
17          $(".tips").each(function(){  //遍历B
18             $(this).mouseover(function(){  //鼠标经过B时触发事件
19             $(this).prev(".maintip").css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"})  //对应的A变为选中状态效果
20             $(this).show();  //A不要隐藏了，解决因为上面写的鼠标离开A导致A隐藏
21         })
22         .mouseout(function(){  //鼠标离开B触发事件，其实就是让B隐藏，同时A变为原始状态
23             $(this).hide();
24             $(this).prev(".maintip").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});
25         })
26     })
27 })

 1 $(function(){
 2
 3 $(".maintip").each(function(index){
 4 var tip_height=$(".tips:eq("+index+")").height();
 5 $(this).mouseover(function(){
 6 var win_height=$(window).height();    //获取浏览器当前可视区域高度
 7 var obj=$(this).offset();
 8 var wobj=$(this).width();
 9 if(obj.top+tip_height<win_height){    //判断B底部是否超过浏览器底部
10     //没超过，按默认A和B顶端偏移位置一致即可
11     var xobj=obj.left+wobj+"px";
12     var yobj=obj.top+"px";
13 }
14 else{
15     //超过了，那么抬高B顶部位置
16     var tip_top=win_height-tip_height;
17     var xobj=obj.left+wobj+"px";
18     var yobj=tip_top+"px";
19 }
20 $(this).css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"});
21 $(".tips:eq("+index+")").css({"left":xobj,"top":yobj}).show();
22 }).mouseout(function(){
23 $(".tips").hide();
24 $(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})
25 })
26
27  })
28
29  $(".tips").each(function(){
30 $(this).mouseover(function(){
31 $(this).prev(".maintip").css({"width":"200px","z-index":"9999","border-right":"none","background":"#fff"})
32 $(this).show();
33 }).mouseout(function(){
34 $(this).hide();
35 $(this).prev(".maintip").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});
36   })
37
38       })
39 })