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

Question

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

为此，我在其上方放置了一个带有类名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;
}

这是有效的，但在进出开始并且永不停止时不是应该的；有点循环。

有什么解决办法吗？或者是否有正确的方法来实现与插件相同的功能？

Answer 1

没有必要为此安装插件

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

Answer 2

试试这个更新的fiddle

HTML 代码

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

Answer 3

如果您真的在寻找仅 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>