隐藏div悬停并使用淡入淡出显示另一个
[英]Hide div hovering and show another down with fade effect
问题描述
I happen to have a div and I would like hovering above would make a hover effect and would show another div the same size and characteristics but with other content. 
我碰巧有一个div，我想将鼠标悬停在上面会产生悬停效果，并且会显示另一个div相同的大小和特征，但具有其他内容。 I've tried with jquery does not work, do not know if I'll be doing something wrong, here I leave the code: 我尝试过使用jquery无法正常工作，不知道我做错了什么，在这里留下代码：
jquery: jQuery的：
$(function() {
$('.ep1-d').hover(function() {
$('.div-titulos-ep-singles-d').fadeIn();
}, function() {
$('.div-titulos-ep-singles-d').fadeOut();
});
});
html: HTML：
<div class="ep1-d">
prueba-cambia
</div>
<div class="div-titulos-ep-singles-d">
<span class="titulos-ep-y-singles-texto-d">
prueba<br>
<br>
prueba<br>
prueba<br>
9<br>
</span>
</div>
css: CSS：
.div-titulos-ep-singles-d {
height: 260px;
width: 260px;
position:absolute;
left: 465px;
top: 46px;
}
.ep1-d {
height: 260px;
width: 260px;
position:absolute;
left: 465px;
top: 46px;
border: 1px solid rgba(0, 0, 0, 0.24)!important;
4 个解决方案
解决方案1
1 已采纳 2015-08-17 11:13:00
Your code is correct and along with the jquery that you are using 您的代码正确，并且与您正在使用的jquery一起使用
$(document).ready(function() {
$('.ep1-d').hover(function() {
$('.div-titulos-ep-singles-d').fadeIn('slow');
}, function() {
$('.div-titulos-ep-singles-d').fadeOut('slow');
});
});
for example visit here 例如访问这里
New edit 新编辑
$(document).ready(function() {
var $interval = "";
$('.ep1-d').on('mouseenter', function(event) {
$interval = setInterval(function(){
$('.div-titulos-ep-singles-d').fadeIn("slow").promise().done(function(){
$(this).fadeOut('slow');
});
},20)
}).on('mouseleave', function(event) {
clearInterval($interval);
});
});
for example visit here 例如访问这里
解决方案2
1 2015-08-17 11:13:02
Here you go mate. 在这里，你去伴侣。 following code should work for you ... 以下代码应该为您工作...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checking</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
#div2 {
width: 200px;
height: 200px;
background: green;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div1").hover(function() {
$(this).fadeOut(1000);
$("#div2").fadeIn(2000);
});
});
</script>
</body>
</html>
解决方案3
1 2015-08-17 11:15:50
Try this one: 试试这个：
$(document).ready(function() {
$('.ep1-d').hover(function() {
$('.div-titulos-ep-singles-d').fadeIn(1000);
}, function() {
$('.div-titulos-ep-singles-d').fadeOut(1500);
});
});
解决方案4
1 2015-08-17 12:19:30
JSFIDDLE: https://jsfiddle.net/1wyjzyz6/4/ JSFIDDLE： https ：//jsfiddle.net/1wyjzyz6/4/
A smooth fade-in fade-out transition on hover effect 悬停效果时平滑的淡入淡出过渡
.divOne , .divTwo{
width: 100px;
height: 100px;
background-color: wheat;
margin: 10px;
padding: 10px;
position: absolute;
transition: opacity 2s;
}
.divTwo {
background-color: pink;
opacity: 0;
}
.fadeOut {
opacity: 0;
}
.fadeIn {
opacity: 1;
}
$(document).ready(function(){
$('.outDiv').hover(
function () {
$(".divOne").addClass("fadeOut");
$(".divTwo").addClass("fadeIn");
},
function () {
$(".divOne").removeClass("fadeOut");
$(".divTwo").removeClass("fadeIn");
}
);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.