javascript - 隐藏 div 悬停并使用淡入淡出效果显示另一个向下

Question

我碰巧有一个 div，我希望悬停在上方会产生悬停效果，并会显示另一个具有相同大小和特征但包含其他内容的 div。我试过jquery不行，不知道会不会出错，这里我留下代码:

j查询:

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