JQUERY多个DIV鼠标移入移出显示隐藏对应DIV 100
<divclass="list"><em>点击小图标<imgsrc="小图标1.jpg"/></em><span>我是显示的内容1</span></div><divcla...
<div class="list">
<em>点击小图标<img src="小图标1.jpg" /></em>
<span>我是显示的内容1</span>
</div>
<div class="list">
<em>点击小图标<img src="小图标2.jpg" /></em>
<span>我是显示的内容2</span>
</div>
<div class="list">
<em>点击小图标<img src="小图标3.jpg" /></em>
<span>我是显示的内容3</span>
</div>
若干个这样类似的DIV, 代码循环出来的, 所以没办法用ID, 鼠标移动到 <em> 标签里的 <img> 标签时显示 <span> 标签, 移出隐藏, 在移入触发标签 <img> 时显示的 <span> 标签把鼠标移动到上面不会消失同样也是移出隐藏, 最好能让我加入 animate 代替掉 show(), hide(), 或toggle(), 这种效果请问该如何用JQUERY实现?先谢谢啦!~
就类似淘宝网主页里有一栏, 标题右边是二维码, 鼠标移动显示隐藏那样的.
如图所示 展开
<em>点击小图标<img src="小图标1.jpg" /></em>
<span>我是显示的内容1</span>
</div>
<div class="list">
<em>点击小图标<img src="小图标2.jpg" /></em>
<span>我是显示的内容2</span>
</div>
<div class="list">
<em>点击小图标<img src="小图标3.jpg" /></em>
<span>我是显示的内容3</span>
</div>
若干个这样类似的DIV, 代码循环出来的, 所以没办法用ID, 鼠标移动到 <em> 标签里的 <img> 标签时显示 <span> 标签, 移出隐藏, 在移入触发标签 <img> 时显示的 <span> 标签把鼠标移动到上面不会消失同样也是移出隐藏, 最好能让我加入 animate 代替掉 show(), hide(), 或toggle(), 这种效果请问该如何用JQUERY实现?先谢谢啦!~
就类似淘宝网主页里有一栏, 标题右边是二维码, 鼠标移动显示隐藏那样的.
如图所示 展开
2个回答
展开全部
实现这种功能的jquery是相当简单的，list元素鼠标移入，当前元素里的 span显示；移出则相反，具体代码如下：
$(function(){
//鼠标移入
$('.list').mouseenter(function(){//这里使用mouseover也可以，使用mouseenter是防止冒泡
(this).find('span').show();//这里的show可以改成animate，toggle都可以
});
//鼠标移出
$('.list').mouseleave(function(){//这里使用mouseover也可以，使用mouseenter是防止冒泡
$(this).find('span').hide();//这里的hide可以改成animate，toggle都可以
});
});
追问
这样鼠标移上去都显示了。T-T
已赞过
已踩过<
你对这个回答的评价是？
2016-03-31 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
思路：
获取移动2个元素
给第一个元素加上鼠标移入移除事件，
当鼠标移入时，显示div
当鼠标移除时，隐藏div
代码：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {width: 100px; height: 100px; background: #ccc;}
#div2 {display: none;}
</style>
<script src="js/jquery-1.7.2.js"></script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
function over(){
if(!$("#div2").is(":visible")){
$("#div2").show(); //如果元素为隐藏,则将它显现
}else{
$("#div2").hide(); //如果元素为显现,则将其隐藏
}
}
$('#div1').hover(over,over)
</script>
获取移动2个元素
给第一个元素加上鼠标移入移除事件，
当鼠标移入时，显示div
当鼠标移除时，隐藏div
代码：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {width: 100px; height: 100px; background: #ccc;}
#div2 {display: none;}
</style>
<script src="js/jquery-1.7.2.js"></script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
function over(){
if(!$("#div2").is(":visible")){
$("#div2").show(); //如果元素为隐藏,则将它显现
}else{
$("#div2").hide(); //如果元素为显现,则将其隐藏
}
}
$('#div1').hover(over,over)
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
