懸停功能無限循環插入插件

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>