javascript jquery，鼠标悬停事件

Question

here is my code in which i only know the mouse over and is working completely fine, but it mouse over the whole picture and i want the mouse over from the inside as well as the a slight zoom-in, here is the site from which you can see what am i asking for?这是我的代码，其中我只知道鼠标悬停并且工作完全正常，但是它将鼠标悬停在整个图片上，我希望将鼠标从内部悬停并稍微放大，这是来自的站点你能看到我在要求什么吗？ ( https://woodmart.xtemos.com/demo-grocery/demo/grocery/# ) when you scroll down to the ads and then you hover on ads you can experience mouseover from the inside as well as a slight zoom-in. ( https://woodmart.xtemos.com/demo-grocery/demo/grocery/# ) 当您向下滚动到广告，然后将鼠标悬停在广告上时，您可以从内部体验鼠标悬停以及轻微放大。 Thanks in advance.提前致谢。


<body>
    <div class="page-container">
        <div class="page-back">
            
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        var windowWidth = $(window).width();

        $('.page-back').mouseover(function(event){
            var moveX = (($(window).width() / 2) -event.pageX)*0.1;
            var moveY = (($(window).height() / 2) -event.pageY)*0.1;
            $('.page-back').css('margin-left', moveX +'px');
            $('.page-back').css('margin-top', moveY +'px');
        });
    </script>
</body>
here is its css

.page-container{
    width: 50%;
    height: 50%;
    position: fixed;
    background-color: #fff;
}
.page-back{
    width: 100%;
    height: 100%;
    left: -20%;
    top: -10%;
    position: absolute;
    background-image: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
    background-size: 500px;
    background-position: center;
}

Answer 1

You don't actually need Js for this.你实际上并不需要 Js。 You can do this using CSS.你可以使用 CSS 来做到这一点。

HTML : HTML :

<div class="page-container">
            <div class="page-back">    
            </div>
    </div>

CSS : CSS :

.page-container{
    width: 300px;
    height: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    position: relative;
}

.page-back{
    width: 100%;
    height: 100%;
    background: url('https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2020/06/wood-food-market-ban-1-opt.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s;
}

.page-back:hover{
    transform: scale(1.2);
}

The main thing here is setting overflow : hidden on page-container .这里的主要内容是设置 overflow : hidden on page-container 。 This will do the job.这将完成工作。 But the background image scales only when hovered on the image and not on any elements inside.但是背景图像仅在悬停在图像上而不是在任何元素上时才会缩放。 For that you need Js.为此，您需要 Js。

Js : JS：

$(document).ready(function() {
  
  $('.page-container').mouseover(function() {
      $(this).find('.page-back').css('transform', 'scale(1.2)');
  });

  $('.page-container').mouseout(function() {
      $(this).find('.page-back').css('transform', 'scale(1)');
  });

});

javascript jquery，鼠标悬停事件

问题描述

1 个解决方案

解决方案1
0 2020-09-12 08:47:53

javascript jquery，鼠标悬停事件

问题描述

1 个解决方案

解决方案1 0 2020-09-12 08:47:53

解决方案1
0 2020-09-12 08:47:53