鼠标滑过显示DIV,但是第二行不起作用怎么改?

<style type="text/css">
#wk{ width:200px;}
#tck{
display:none;
height:169px;
width:223px;
background-image: url(http://www.0937hw.com/111111111111111.png);
padding-top: 5px;
margin-left: 100px;
background-repeat: no-repeat;
}
body {
background-color: #33CCFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#test').mouseover(function(){
$('#tck').show();
})
.mouseout(function(){
$('#tck').hide();
});
})
</script>
</head>
<body>
<span id="test"style="background:#ccc">第一行测试文本
<div id="tck" style="position:relative;top:0px;">
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
</ul>
</div>
</span>
<p></p>
<span id="test"style="background:#ccc">第二行测试文本
<div id="tck" style="position:relative;top:0px;">
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
</ul>
</div>

第1个回答  推荐于2016-09-28

    id必须唯一.

    如果id不唯一.我也给你写了个 . 里面代码略微有些改变.

 

<style type="text/css">
#wk{ width:200px;}
#tck{
 display:none;
 height:169px;
 width:223px;
 background-image: url(
);
 padding-top: 5px;
 margin-left: 100px;
 background-repeat: no-repeat;
}
body {
 background-color: #33CCFF;
}
</style>
<script src="
" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  //$('span').mouseover(function(){
//     var index= $(this).index();
//     
//    $('span > div').eq(index).show();
//   })
//   .mouseout(function(){
//      var index= $(this).index();
//  
//   
//     $('span > div').eq(index).hide();
//    });
// })
 $('span').click(function(){
      var index= $(this).index();
      
     $('span > div').eq(index).toggle();
   });
})
</script>
</head>
<body>
<span id="test"style="background:#ccc;width:100%;float:left;">第一行测试文本
 <div id="tck"  style="position:relative;top:0px;">
  <ul>
   <li><a href="#">11111</a></li>
   <li><a href="#">22222</a></li>
  </ul>
 </div>
</span>

<span id="test"style="background:#ccc;width:100%;float:left;">第二行测试文本
 <div id="tck"  style="position:relative;top:0px;">
  <ul>
   <li><a href="#">11111</a></li>
   <li><a href="#">22222</a></li>
  </ul>
 </div>
</span>

<span id="test"style="background:#ccc;width:100%;float:left;">第三行测试文本
 <div id="tck"  style="position:relative;top:0px;">
  <ul>
   <li><a href="#">11111</a></li>
   <li><a href="#">22222</a></li>
  </ul>
 </div>
</span>

<span id="test"style="background:#ccc;width:100%;float:left;">第四行测试文本
 <div id="tck"  style="position:relative;top:0px;">
  <ul>
   <li><a href="#">11111</a></li>
   <li><a href="#">22222</a></li>
  </ul>
 </div>
</span>

本回答被提问者采纳
第2个回答  2013-09-27
ID是唯一的,不能有多个。
改用class,或者用两个不同的id试试。
第3个回答  2013-09-27
一个页面的id值是不能重复的,如果重复话,js会一直调用id靠前的那个

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网