悬停功能在插件中无限循环

Hover function loops infinitly in plugin

本文关键字：无限循环 插件 功能 悬停      更新时间：2023-09-26

>我正在制作一个简单的插件，如果我将鼠标悬停在图像上，它的背景颜色应该会变成半透明的黑色。

为此，我在它上面放置了一个带有类名的标签overlay以产生效果。由于每个图像的高度和宽度都不同，因此我从图像中获取高度/宽度并将其动态提供给overlay类。最后，当鼠标出去时，我只是使背景颜色透明。

这是代码

<div class="overlay"></div>
<a href="" class="box">
    <img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>

(function($) {    
    $.fn.imageOverlay = function() {
        return this.each(function() {                
            var $this = $(this);
            var width = $this.width();
            var height = $this.height();            
            $this.hover(function(){
                $('.overlay').css({
                   width: width,
                   height: height,
                   backgroundColor: 'rgba(0,0,0,0.5)'    
                });
                console.log('in');
            }, function(){
                $('.overlay').css({
                    width: 0,
                    height: 0,
                    backgroundColor: 'rgba(0,0,0,0)'
                });
                console.log('out');
            });                
        });
    }    
}(jQuery));
(function($){        
    $('.box').imageOverlay();        
}(jQuery));
.overlay {
    position: absolute;
    display: inline-block;
}

这是有效的，但不是在进出开始时应该的那样，永远不会停止; 有点循环。

对此有什么解决方案吗？或者有没有正确的方法来实现与插件相同的功能？

没有必要为此安装插件

.box {
  display: inline-block;
  position: relative;
}
.box .overlay {
  position: absolute;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.box:hover .overlay {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
}
<div class="box">
  <div class="overlay"></div>
  <a href="">
    <img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
  </a>
</div>

如果你想要jQuery插件

(function($) {
  $.fn.imageOverlay = function() {
    return this.each(function() {
      var $this = $(this),
        $overlay = $this.find('.overlay');
      $this.hover(function() {
        $overlay.show();
      }, function() {
        $overlay.hide();
      });
    });
  }
}(jQuery));
(function($) {
  $('.box').imageOverlay();
}(jQuery));
.box {
  display: inline-block;
  position: relative;
}
.box .overlay {
  position: absolute;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.box:hover .overlay {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="overlay"></div>
  <a href="">
    <img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
  </a>
</div>

试试这个更新的小提琴

网页代码

<div class="box">
    <div class="overlay"></div>
    <img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</div>

JS代码

(function($){
    $.fn.imageOverlay = function(){
        return this.each(function(){
            var $this = $(this);
            var width = $this.find("img").width();
            var height = $this.find("img").height();            
            $this.hover(function(){
                $this.find('.overlay').css({
                   width: width,
                   height: height,
                   backgroundColor: 'rgba(0,0,0,0.5)'    
                });
                console.log('in');
            }, function(){
                $this.find('.overlay').css({
                    width: 0,
                    height: 0,
                    backgroundColor: 'rgba(0,0,0,0)'
                });
                console.log('out');
            });
        });
    }
}(jQuery));

(function($){
    $('.box').imageOverlay();
}(jQuery));

如果您真的在寻找仅限jQuery的解决方案，那么您可以查看基于计时器的解决方案，例如

(function($) {
  $.fn.imageOverlay = function() {
    return this.each(function() {
      var $this = $(this),
        $overlay = $this.find('.overlay'),
        $img = $this.find("img"),
        timer;
      $img.hover(function() {
        var width = $img.width();
        var height = $img.height();
        $overlay.css({
          width: width,
          height: height
        }).show();
      }, function() {
        timer = setTimeout(function() {
          $overlay.hide();
        }, 200);
      });
      $overlay.hover(function() {
        clearTimeout(timer);
      }, function() {
        $overlay.hide();
      });
    });
  }
}(jQuery));
(function($) {
  $('.box').imageOverlay();
}(jQuery));
.overlay {
  position: absolute;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="overlay"></div>
  <a href="">
    <img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
  </a>
</div>

相关文章：