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/

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

activity.getFragmentManager()
    .beginTransaction()
    .add(android.R.id.content, new FragmentLoad())
    .commit();

隐藏div悬停并显示另一个淡入淡出效果

4 个答案:

新编辑