如何在第二个div的鼠标悬停处打开1个div？
[英]How to open 1 div on mouse hover of second div?
问题描述
Hi I am trying to open one div on mouse hover of second div. 
嗨，我正在尝试将鼠标悬停在第二个div上打开一个div。 The div 1 is display is none by default but when user hover on div 2 the div 1 will be displayed. 默认情况下，不显示div 1，但是当用户将鼠标悬停在div 2上时，将显示div 1。 But it's not working. 但这不起作用。 My code : 我的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
.testtmpblock{
display: none;
background-color: black;
height: 100px;
width: 100px;
}
.tmpd{
height: 100px;
width: 100px;
background-color: blue;
}
</style>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).find(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).find(".testtmpblock").hide();
});
});
</script>
</head>
<body>
<div class="tmpd">
kjkjkj
</div>
<div class="testtmpblock">
data
</div>
</body>
</html>
div testtmpblock will be appear on hover of div tmpd but it's not working. div testtmpblock将出现在div tmpd悬停上，但它不起作用。
I have also write Script for it. 我也为此编写了脚本。 Any guidance that where I am wrong ? 任何指导，我错了吗？
4 个解决方案
解决方案1
3 已采纳 2013-11-13 06:40:39
You need to use next instead of find as find is used for desendants and your required element is not descendant. 您需要使用next而不是find因为find用于后代，而您所需的元素不是后代。
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(this).next(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(this).next(".testtmpblock").hide();
});
});
You can avoid next if only single element has class testtmpblock 如果只有单个元素具有class testtmpblock则可以避免next
$(document).ready(function () {
$(document).on('mouseenter', '.tmpd', function () {
$(".testtmpblock").show();
}).on('mouseleave', '.tmpd', function () {
$(".testtmpblock").hide();
});
});
解决方案2
2 2013-11-13 06:42:08
If the divs are next to each other you do this with CSS only: 如果div彼此相邻，则只能使用CSS进行此操作：
.testtmpblock {
display: none;
}
.tmpd:hover ~ .testtmpblock {
display: block;
}
If you want to animate it you can use CSS3 transitions. 如果要为其设置动画，则可以使用CSS3过渡。
99% of time you can get away with CSS only, and the animations will be faster with transitions. 您只有99％的时间无法使用CSS，并且过渡时动画会更快。 It's all about how you handle the markup. 这与您如何处理标记有关。 If you make the hidden element a child then it's always doable with just CSS, for example: 如果将隐藏元素设为子元素，则仅使用CSS即可，例如：
<div class="tmpd">
kjkjkj
<div class="testtmpblock">
data
</div>
</div>
And you'd use a selector like so: 您将使用如下选择器：
.tmpd:hover .testtmpblock {}
解决方案3
1 2013-11-13 06:41:16
解决方案4
1 2013-11-13 06:42:17
$(document).ready(function () {
$('body').on('hover','.tmpd', function () {
$(".testtmpblock").show();
}, function () {
$(".testtmpblock").hide();
}
);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.