首页 新闻 会员 周边

Jqery仿京东侧栏

0
悬赏园豆:40 [待解决问题]
 1 <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
 2 <script type="text/javascript">
 3     $(document).ready(function () {
 4         $(".testbox ul li").mousemove(function () {
 5             $(this).find(".boxshow").show();
 6         });
 7         $(".testbox ul li ").mouseleave(function () {
 8             $(this).find(".boxshow").hide();
 9         });
10     });
11 </script>
12 <div class="testbox">
13     <div id="c_title">
14         全部类别</div>
15     <ul>
16         <%for (int i = 0; i < 11; i++)
17           {%>
18         <li><a href="#">测试分类标题<%=i %></a>
19             <div id="boxshow" class="boxshow">
20                 分类标题<%=i %>的内容</div>
21         </li>
22         <%} %>
23     </ul>
24 </div>

上面是JS代码,、下面是对应的CSS样式代码

 1 .testbox {
 2     width: 288px;
 3     height:490px;
 4     position:relative;
 5     top:-23px;
 6     border-width:0px 2px 2px 2px;
 7     border-style:solid;
 8     border-color:#ba0c0c;
 9 }
10 .testbox li{ list-style:none;}
11 .testbox ul li a {
12     font-size: 12px;
13     text-decoration: none;
14     background-color: White;
15     padding: 8px;
16     margin: 4px;
17     float: left;
18     position: relative;
19     width: 200px;
20     font-family:宋体;
21      font-size:14px;
22 }
23 .testbox ul li a:hover 
24 {
25     font-family:宋体;
26     font-size: 14px;
27     text-decoration: none;
28     background-color: White;
29     padding: 8px;
30     float: left;
31     position: relative;
32     border-top-width: 1px;
33     border-bottom-width: 1px;
34     border-left-width: 1px;
35     border-right-width: 1px;
36     border-top-style: solid;
37     border-bottom-style: solid;
38     border-left-style: solid;
39     border-right-style: solid;
40     border-top-color: #ba0c0c;
41     border-bottom-color:#ba0c0c;
42     border-left-color: #ba0c0c;
43     border-right-color: White;
44     z-index: 2;
45     width: 200px;
46 }
47  .boxshow {
48     background-color:  White;
49     height: 438px;
50     width: 690px;
51     position: absolute;
52     left: 221px;
53     border: 1px solid #ba0c0c;
54     color: #000;
55     padding: 10px;
56     display: none;
57     z-index: 1;
58 }
59 #c_title{ width:296px; z-index:9; position:relative; height:30px; text-align:center; color:White; font-size:14px; font-weight:bold;  font-family:幼圆;}
60 .hover{width:201px;border:1px solid #ba0c0c;border-right:0 solid white;  font-family:宋体;    font-size: 14px;    text-decoration: none;    background-color: White;    padding: 8px;    float: left;    position: relative; z-index:9999;}
61 
62  

问题是我所写的代码,当鼠标移动到boxshow区域时,左边a标签的样式被清除了。当我把鼠标移动到boxshow区域时,如何保证li标签的样式存在呢?求救啊~~~

< >
分享
所有回答(2)
0

你在写一个样式呗,写移动到boxshow区域时的样式

┢┦偉 | 园豆:1240 (小虾三级) | 2012-05-03 15:12
0

我写过一个类似的,你可以 pm 我,我发给你看看 !

张坤 | 园豆:1865 (小虾三级) | 2012-06-29 13:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册