隐藏div悬停并显示另一个淡入淡出效果(Hide div hovering and show another down with fade effect)

我碰巧有一个div，我想悬停在上面会产生悬停效果，并会显示另一个div相同的大小和特征，但与其他内容。我试过用jquery不起作用，不知道我是不是会做错什么，这里我留下代码：

jQuery的：

$(function() { $('.ep1-d').hover(function() { $('.div-titulos-ep-singles-d').fadeIn(); }, function() { $('.div-titulos-ep-singles-d').fadeOut(); }); });

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：

.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;

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. I've tried with jquery does not work, do not know if I'll be doing something wrong, here I leave the code:

jquery:

$(function() { $('.ep1-d').hover(function() { $('.div-titulos-ep-singles-d').fadeIn(); }, function() { $('.div-titulos-ep-singles-d').fadeOut(); }); });

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:

.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;

最满意答案

您的代码是正确的，以及您正在使用的jquery

$(document).ready(function() { $('.ep1-d').hover(function() { $('.div-titulos-ep-singles-d').fadeIn('slow'); }, function() { $('.div-titulos-ep-singles-d').fadeOut('slow'); }); });

例如， 访问这里

新编辑

$(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); }); });

例如， 访问这里

Your code is correct and along with the jquery that you are using

$(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

更多推荐