鼠标经过图片显示div，div显示后就顶替了图片的位置，我的div要怎样才能再正常的消失？？？ 10
插入三张图片，在三张图片的后面都隐藏了一个div。设置鼠标经过图片显示div，div显示后就顶替了图片的位置，这时候鼠标悬停的位置就在div上面。作为新手的我快要哭了，求...
插入三张图片，在三张图片的后面都隐藏了一个div。设置鼠标经过图片显示div，div显示后就顶替了图片的位置，这时候鼠标悬停的位置就在div上面。作为新手的我快要哭了，求大神帮忙。
<script> jQ部分
$(function(){
$(".watch").mouseover(function(){
$(this).next('div').show(500);
// $(this).next('div').css('display','block')
});
$(".watch_text").mouseout(function(){
$(this).hide(500);
});
$(".watch_text").mouseover(function() {
$(this).css('display', 'block');
});
})
</script>
结构部分
<div>
<img src="images/watch1.jpg" class="watch">
<div class="watch_text">
<p>最新惊喜价<p><br>
<h2>￥4999</h2>
<img src="images/btn-buy.jpg">
</div>
</div>
<div>
<img src="images/watch2.jpg" class="watch">
<div class="watch_text">
<p>最新心动价<p><br>
<h2>￥4499</h2>
<img src="images/btn-buy.jpg">
</div>
</div>
<div>
<img src="images/watch3.jpg" class="watch">
<div class="watch_text">
<p>最新回馈价<p><br>
<h2>￥4199</h2>
<img src="images/btn-buy.jpg">
</div>
</div>
我采用了这样一段代码可以解决问题，但这段代码不能在hide与show里设置时间参数，要不然还是乱的。。。。。。。。。
$('.watch_text').hide();
$('.watch').hover( function() {
$(this).next('div').show();
}, function() {
$(this).next('div').hide();
});
$('.watch_text').hover( function() {
$(this).show();
}, function() {
$(this).hide();
}); 展开
<script> jQ部分
$(function(){
$(".watch").mouseover(function(){
$(this).next('div').show(500);
// $(this).next('div').css('display','block')
});
$(".watch_text").mouseout(function(){
$(this).hide(500);
});
$(".watch_text").mouseover(function() {
$(this).css('display', 'block');
});
})
</script>
结构部分
<div>
<img src="images/watch1.jpg" class="watch">
<div class="watch_text">
<p>最新惊喜价<p><br>
<h2>￥4999</h2>
<img src="images/btn-buy.jpg">
</div>
</div>
<div>
<img src="images/watch2.jpg" class="watch">
<div class="watch_text">
<p>最新心动价<p><br>
<h2>￥4499</h2>
<img src="images/btn-buy.jpg">
</div>
</div>
<div>
<img src="images/watch3.jpg" class="watch">
<div class="watch_text">
<p>最新回馈价<p><br>
<h2>￥4199</h2>
<img src="images/btn-buy.jpg">
</div>
</div>
我采用了这样一段代码可以解决问题，但这段代码不能在hide与show里设置时间参数，要不然还是乱的。。。。。。。。。
$('.watch_text').hide();
$('.watch').hover( function() {
$(this).next('div').show();
}, function() {
$(this).next('div').hide();
});
$('.watch_text').hover( function() {
$(this).show();
}, function() {
$(this).hide();
}); 展开
2个回答
展开全部
你把问题弄复杂了，只要在图片标签外加一个容器就可以了，具体测试如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.watchbox{z-index:10;}
.watch_text{z-index:5; background:#f60;margin-top:-100px;}
.watch_text,.watch,.watchbox{width:100px;height:100px;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".watch").mouseover(function(){
$(this).hide(500);
});
$(".watch_text").mouseout(function(){
$(this).prev().children(".watch").show(500);
});
});
</script>
</head>
<body>
<div class="watchbox">
<img src="images/class_15.png" class="watch">
</div>
<div class='watch_text'></div>
<div class="watchbox">
<img src="images/class_15.png" class="watch">
</div>
<div class='watch_text'></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.watchbox{z-index:10;}
.watch_text{z-index:5; background:#f60;margin-top:-100px;}
.watch_text,.watch,.watchbox{width:100px;height:100px;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".watch").mouseover(function(){
$(this).hide(500);
});
$(".watch_text").mouseout(function(){
$(this).prev().children(".watch").show(500);
});
});
</script>
</head>
<body>
<div class="watchbox">
<img src="images/class_15.png" class="watch">
</div>
<div class='watch_text'></div>
<div class="watchbox">
<img src="images/class_15.png" class="watch">
</div>
<div class='watch_text'></div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
