悬停时背景图像更改

Question

我正在创建一个 jquery 后台更改脚本。该脚本正在运行，但是当我添加一些淡入动画时，它会出现一些问题。当您将鼠标悬停在文本上 2-3 次时，它会在几秒钟内不显示任何内容。我试过这段代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BG CHNAGE</title>
</head>
<body style="background-color: #1f1f1f; height: 100vh !important; padding-top: 0;">

        <div class="box" style="height: 100vh !important; background-repeat: no-repeat; background-size: cover;">
            <div class="row">
                <div class="col-sm-12 col-md-6 p-5">
                    <div class="content">
                        <a href="#" target="_blank">
                                <h3 class="content-title button" >800ezer</h3>
                        </a>
                    </div>
                </div>
            </div>
        </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script> 
        $(document).ready(function() {           
            $(".button").mouseover(function() { 
                var imageUrl =  "https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg"; 
                $(".box").hide().css("background-image", "url(" + imageUrl + ")").fadeIn(800); 
            });
            $(".button").mouseout(function() { 
                var imageUrl =  ""; 
                $(".box").hide().css("background-image", "url(" + + ")").fadeIn(800); 
            }); 
        }); 
    </script>
</body>
</html>

Answer 1

请试试这个：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BG CHNAGE</title>
    </head>
    <body style="background-color: #1f1f1f; height: 100vh !important; padding-top: 0;">


             <div class="content">
                 <a href="#" target="_blank">
                   <h3 class="content-title button" >800ezer</h3>
                </a>
             </div> 
            <div class="box" >
                <div class="row">
                    <div class="col-sm-12 col-md-6 p-5">

                    </div>
                </div>
            </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script> 
            $(document).ready(function() {           
                $(".button").mouseover(function() { 

                    $(".box").addClass('bg'); 
                });
                $(".button").mouseout(function() { 
                     $(".box").removeClass( 'bg'); 
                }); 
            }); 
        </script>

        <style>

              .box{
              -webkit-transition: ease all 0.9s;
                -moz-transition: ease all 0.9s;
                -ms-transition: ease all 0.9s;
                transition: ease all 0.9s;
                 background-repeat: no-repeat;
                background-size: cover;
                  height: 100vh !important;
                  opacity: 0;
              }
             .box.bg{
                background-image: url(https://images.freeimages.com/images/small-previews/bd7/falloxbow-1058032.jpg);
                -webkit-transition: ease all 0.9s;
                -moz-transition: ease all 0.9s;
                -ms-transition: ease all 0.9s;
                transition: ease all 0.9s;
                opacity: 1;
            }


        </style>
    </body>
    </html>

悬停时背景图像更改

Background Image change on Hover

css

jquery

animation

jquery-animate