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

没有必要为此

添加插件

＆＃13;

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

＆＃13;

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

＆＃13;

如果你想要jQuery插件

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

悬停函数在插件

3 个答案: