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标签的样式存在呢?求救啊~~~
你在写一个样式呗,写移动到boxshow区域时的样式
我写过一个类似的,你可以 pm 我,我发给你看看 !