自己写的一个jquery的效果，鼠标放上去显示一个div，隐藏一个div
大致的效果就是一个li的列表li里面本来是显示.show1的内容的，然后鼠标放上去后,show1隐藏了，显示show2的内容我做的效果有问题，就是鼠标放上去后它就显示隐藏...
大致的效果就是一个li的列表
li里面本来是显示.show1的内容的，
然后鼠标放上去后,show1隐藏了，显示show2的内容
我做的效果有问题，就是鼠标放上去后它就显示隐藏执行了不止一次，
重复地显示隐藏，我希望大家帮我看看我的代码有什么问题
下面是html代码
<body>
<div class="container">
<div class="menu">
<h1>新闻列表</h1>
<ul id="news_list">
<li>
<div class="show1">show1</div>
<div class="show2">show2</div>
</li>
<li>
<div class="show1">show1</div>
<div class="show2">show2</div>
</li>
<li>
<div class="show1">show1</div>
<div class="show2">show2</div>
</li>
</ul>
</div>
</div>
</body>
这下面是js代码
$(document).ready(function(){
$("#news_list li").mouseover(function(){
$(this).find(".show2").slideDown(500);
$(this).find(".show1").slideUp(500);
})
$("#news_list li").mouseout(function(){
$(this).find(".show2").slideUp(500);
$(this).find(".show1").slideDown(500);
})
})
css代码页贴出来吧...
.container{ width:960px; height:auto; margin: 0 auto;}
.menu{width:200px; height:auto;}
.menu h1{ text-align:center; font-size:16px; line-height:30px; background:#ddd; font-family:微软雅黑;}
.menu ul{ border:1px solid #ccc; padding:0;}
.menu ul li{ border-bottom:1px dashed #ccc; text-indent:10px;}
.menu ul li .show1{ width:auto; line-height:32px; }
.menu ul li .show2{display:none; line-height:32px; background:#ccc6cb; }
我是新手...按自己的思路来写的，希望大家帮我指出我逻辑上的问题
顺便再问下，这几天提问看到知道上面有些人可以直接把代码黏贴上来，
就好像在编辑器里面一样
请问这是怎么提交的 展开
li里面本来是显示.show1的内容的，
然后鼠标放上去后,show1隐藏了，显示show2的内容
我做的效果有问题，就是鼠标放上去后它就显示隐藏执行了不止一次，
重复地显示隐藏，我希望大家帮我看看我的代码有什么问题
下面是html代码
<body>
<div class="container">
<div class="menu">
<h1>新闻列表</h1>
<ul id="news_list">
<li>
<div class="show1">show1</div>
<div class="show2">show2</div>
</li>
<li>
<div class="show1">show1</div>
<div class="show2">show2</div>
</li>
<li>
<div class="show1">show1</div>
<div class="show2">show2</div>
</li>
</ul>
</div>
</div>
</body>
这下面是js代码
$(document).ready(function(){
$("#news_list li").mouseover(function(){
$(this).find(".show2").slideDown(500);
$(this).find(".show1").slideUp(500);
})
$("#news_list li").mouseout(function(){
$(this).find(".show2").slideUp(500);
$(this).find(".show1").slideDown(500);
})
})
css代码页贴出来吧...
.container{ width:960px; height:auto; margin: 0 auto;}
.menu{width:200px; height:auto;}
.menu h1{ text-align:center; font-size:16px; line-height:30px; background:#ddd; font-family:微软雅黑;}
.menu ul{ border:1px solid #ccc; padding:0;}
.menu ul li{ border-bottom:1px dashed #ccc; text-indent:10px;}
.menu ul li .show1{ width:auto; line-height:32px; }
.menu ul li .show2{display:none; line-height:32px; background:#ccc6cb; }
我是新手...按自己的思路来写的，希望大家帮我指出我逻辑上的问题
顺便再问下，这几天提问看到知道上面有些人可以直接把代码黏贴上来，
就好像在编辑器里面一样
请问这是怎么提交的 展开
2个回答
展开全部
$(document).ready(function(){
$("#news_list div.show1").mouseover(function(){
$(this).slideUp(500);
$(this).next(".show2").slideDown(500);
});
$("#news_list div.show2").mouseout(function(){
$(this).slideUp(500);
$(this).prev(".show1").slideDown(500);
});
})你如果以li做为触发对象的话，肯定会执行多次的，因为show1和show2都在li里，还有语法高亮是要在回答的时候才有
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(function() {
$("#weixin_weibo").hover(function(){
$("#big_weixin").slideDown(500);
},function(){
$("#big_weixin").slideUp(500);
})
});
$("#weixin_weibo").hover(function(){
$("#big_weixin").slideDown(500);
},function(){
$("#big_weixin").slideUp(500);
})
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
