Question 246204 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can I make the hover effect work when leaving the whole container

When I hover over the content div, the effect works fine. But when I move my mouse outside of the .parent div, the image does not fade out. There is also an issue when the transition takes place, that you see a flash of a broken image icon. Is there an easy way to fix these issues?

This code can be saved to an html file and run exactly as is.

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

When I hover over the content div, the effect works fine. But when I move my mouse outside of the .parent div, the image does not fade out. There is also an issue when the transition takes place, that you see a flash of a broken image icon. Is there an easy way to fix these issues?

This code can be saved to an html file and run exactly as is.

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

2

Answers


  1. 0

    Instead of referencing .child, I used $(this).prev() to reference the previous element of the content element that was triggering the animation on hover.

    Also I removed the .attr("src", '') so it won’t have a broken image.

    <!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>
    Login or Signup to reply.
  2. 0

    You animation is working alright, just set the same image as background, since you’re setting the opacity to 0, it simply won’t be displayed (no need to do .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search