隐藏 div 悬停并显示另一个带有淡入淡出效果的向下

Question

我碰巧有一个 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;

Answer 1

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

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

例如visit here

新编辑

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

例如visit here

Answer 2

给你伙计。以下代码应该适合您...

<!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>

Answer 3

试试这个：

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

Answer 4

JSFIDDLE：https://jsfiddle.net/1wyjzyz6/4/

悬停效果的平滑淡入淡出过渡

.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"); 
        }
    );
});

隐藏 div 悬停并显示另一个带有淡入淡出效果的向下

Hide div hovering and show another down with fade effect

javascript

css

jquery

hover

新编辑