javascript jquery，鼠標懸停事件

Question

這是我的代碼，其中我只知道鼠標懸停並且工作完全正常，但是它將鼠標懸停在整個圖片上，我希望將鼠標從內部懸停並稍微放大，這是來自的站點你能看到我在要求什么嗎？ ( https://woodmart.xtemos.com/demo-grocery/demo/grocery/# ) 當您向下滾動到廣告，然后將鼠標懸停在廣告上時，您可以從內部體驗鼠標懸停以及輕微放大。 提前致謝。


<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

你實際上並不需要 Js。 你可以使用 CSS 來做到這一點。

HTML :

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

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);
}

這里的主要內容是設置 overflow : hidden on page-container 。 這將完成工作。 但是背景圖像僅在懸停在圖像上而不是在任何元素上時才會縮放。 為此，您需要 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