jquery 我怎样才能使悬停效果的工作时，离开整个容器

up9lanfz 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(106)

当我将鼠标悬停在内容div上时，效果很好。但是当我将鼠标移动到.parent div之外时，图像不会淡出。还有一个问题，当过渡发生时，你会看到一个破碎的图像图标 Flink 。有没有简单的方法来解决这些问题？
这段代码可以保存到一个html文件中，并完全按原样运行。

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Page Title</title>
        <style>
            .parent {
                width: 100%;
                height: 100%;
                background-color: black;
                position: relative;
            }
            .child {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
            .content {
                height: 20vh;
                position: relative;
                z-index: 1;
                border-bottom: 1px solid gray;
            }
            .content h3 {
                position: relative;
                margin: 10px;
                color: white;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="parent">
            <img class="child" src="">
            <div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
                <h3>Title</h3>
            </div>
            <img class="child" src="">
            <div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
                <h3>Title</h3>
            </div>
            <img class="child" src="">
            <div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
                <h3>Title</h3>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script>
            $('.content').hover(
                function() {
                    var dataImg = $(this).data('imgurl');
                    $(".child").finish().attr("src", dataImg).animate({
                        opacity: 1
                    }, 400);
                },
                function() {
                    $(".child").finish().animate({
                        opacity: 0
                    }, 400).attr("src", '');
                }
            );
        </script>
    
    </body>
    
    </html>

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        .parent {
            width: 100%;
            height: 100%;
            background-color: black;
            position: relative;
        }
        .child {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .content {
            height: 20vh;
            position: relative;
            z-index: 1;
            border-bottom: 1px solid gray;
        }
        .content h3 {
            position: relative;
            margin: 10px;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="parent">
        <img class="child" src="">
        <div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
            <h3>Title</h3>
        </div>
        <img class="child" src="">
        <div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
            <h3>Title</h3>
        </div>
        <img class="child" src="">
        <div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
            <h3>Title</h3>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $('.content').hover(
            function() {
                var dataImg = $(this).data('imgurl');
                $(".child").finish().attr("src", dataImg).animate({
                    opacity: 1
                }, 400);
            },
            function() {
                $(".child").finish().animate({
                    opacity: 0
                }, 400).attr("src", '');
            }
        );
    </script>

</body>

</html>

jquery

来源：https://stackoverflow.com/questions/77114177/how-can-i-make-the-hover-effect-work-when-leaving-the-whole-container

2条答案

按热度按时间

vq8itlhq1#

我没有引用.child，而是使用$(this).prev()来引用内容元素的前一个元素，该元素在悬停时触发动画。
我还删除了.attr("src", '')，所以它不会有一个破碎的形象。

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Page Title</title>
        <style>
            .parent {
                width: 100%;
                height: 100%;
                background-color: black;
                position: relative;
            }
            .child {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
            .content {
                height: 20vh;
                position: relative;
                z-index: 1;
                border-bottom: 1px solid gray;
            }
            .content h3 {
                position: relative;
                margin: 10px;
                color: white;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="parent">
            <img class="child" src="">
            <div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
                <h3>Title</h3>
            </div>
            <img class="child" src="">
            <div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
                <h3>Title</h3>
            </div>
            <img class="child" src="">
            <div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
                <h3>Title</h3>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script>
            $('.content').hover(
                function() {
                    var dataImg = $(this).data('imgurl');
                    $(this).prev().finish().attr("src", dataImg).animate({
                        opacity: 1
                    }, 400);
                },
                function() {
                     $(this).prev().finish().animate({
                        opacity: 0
                    }, 400);
                }
            );
        </script>
    
    </body>
    
    </html>

赞(0）回复(0）举报 2023-10-17

qnakjoqk2#

你的动画工作正常，只要设置相同的图像作为背景，因为你设置的不透明度为0，它根本不会被显示（不需要做.attr('src', '')）

$('.content').hover(
  function() {
    var dataImg = $(this).data('imgurl');
    $(".child").finish().attr("src", dataImg).animate({
      opacity: 1
    }, 400);
  },
  function() {
    var dataImg = $(this).data('imgurl');
    $(".child").finish().animate({
      opacity: 0
    }, 400).attr("src", dataImg);
  }
);

.parent {
  width: 100%;
  height: 100%;
  background-color: black;
  position: relative;
}

.child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.content {
  height: 20vh;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid gray;
}

.content h3 {
  position: relative;
  margin: 10px;
  color: white;
  text-align: center;
}

<div class="parent">
  <img class="child" src="">
  <div class="content" data-imgurl="https://loremflickr.com/320/240?lock=30976">
    <h3>Title</h3>
  </div>
  <img class="child" src="">
  <div class="content" data-imgurl="https://loremflickr.com/320/240/paris,girl/all?lock=30976">
    <h3>Title</h3>
  </div>
  <img class="child" src="">
  <div class="content" data-imgurl="https://loremflickr.com/320/240/dog?lock=30976">
    <h3>Title</h3>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 我怎样才能使悬停效果的工作时，离开整个容器

2条答案

相关问题

热门标签

最新问答