Lớp phủ màu di chuột hình ảnh jQuery

Question

Tôi dường như không tìm thấy bất kỳ ví dụ nào về việc này đã được thực hiện ở bất kỳ nơi nào trên internet trước đây nhưng đây là những gì tôi sẽ cố gắng thực hiện ... Tôi đang cố gắng dọn dẹp cách có thể đặt ra điều này.

Vì vậy, tôi có thư viện hình ảnh nơi các hình ảnh có tất cả các kích thước khác nhau. Tôi muốn làm cho nó để khi bạn di chuột qua hình ảnh, nó biến một bóng màu cam. Chỉ là một hiệu ứng di chuột đơn giản.

Tôi muốn làm điều này mà không cần sử dụng trao đổi hình ảnh, nếu không tôi phải tạo hình ảnh di chuột màu cam cho từng hình ảnh thư viện riêng lẻ, tôi muốn điều này năng động hơn một chút.

Kế hoạch của tôi chỉ để đặt div trống trên ảnh hoàn toàn với màu nền, chiều rộng và chiều cao 100% và độ mờ: 0. Sau đó, sử dụng jquery, khi di chuột qua, tôi sẽ giảm độ mờ xuống 0,3 hoặc hơn, và giảm dần về số không khi di chuột qua.

Câu hỏi của tôi là, cách tốt nhất để bố cục html và css để làm điều này một cách hiệu quả và sạch sẽ là gì.

Dưới đây là một tóm tắt, nhưng thiết lập không đầy đủ:

<li> 
    <a href="#"> 
    <div class="hover">&nbsp;</div> 
    <img src="images/galerry_image.png" /> 
    </a> 
</li> 

.hover { 
width: 100%; 
height: 100%; 
background: orange; 
opacity: 0; 
} 

Answer 1

Vì vậy, hãy bắt đầu với HTML hơi đơn giản:

<ul id="special"> 
    <li><a href="#"><img src="opensrs-2.png" /></a></li> 
    <li><a href="#"><img src="opensrs-1.png" /></a></li> 
</ul> 

Đây là giải pháp của tôi:

<style type="text/css"> 
#special a img { border: none;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $('#special a').bind('mouseover', function(){ 
     $(this).parent('li').css({position:'relative'}); 
     var img = $(this).children('img'); 
     $('<div />').text(' ').css({ 
      'height': img.height(), 
      'width': img.width(), 
      'background-color': 'orange', 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.5 
     }).bind('mouseout', function(){ 
      $(this).remove(); 
     }).insertAfter(this); 
    }); 

}); 
</script> 

EDIT: Với phai nhanh trong, phai mờ:

$('#special a').bind('mouseover', function(){ 
    $(this).parent('li').css({position:'relative'}); 
    var img = $(this).children('img'); 
    $('<div />').text(' ').css({ 
     'height': img.height(), 
     'width': img.width(), 
     'background-color': 'orange', 
     'position': 'absolute', 
     'top': 0, 
     'left': 0, 
     'opacity': 0.0 
    }).bind('mouseout', function(){ 
     $(this).fadeOut('fast', function(){ 
      $(this).remove(); 
     }); 
    }).insertAfter(this).animate({ 
     'opacity': 0.5 
    }, 'fast'); 
}); 

Answer 2

Bạn đang tìm kiếm một cái gì đó như thế này:

jQuery:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#images span > img").hover(function(){ 
     $(this).fadeTo("fast",0.3); 
    },function(){ 
     $(this).fadeTo("fast",1.0); 
    }); 
    }); 
</script> 

HTML:

<div id="images"> 
    <span><img src="image1.jpg" /></span> 
    <span><img src="image2.jpg" /></span> 
    <span><img src="image3.jpg" /></span> 
    <span><img src="image4.jpg" /></span> 
    <span><img src="image5.jpg" /></span> 
    <span><img src="image6.jpg" /></span> 
    <span><img src="image7.jpg" /></span> 
</div> 

CSS:

<style type="text/css"> 
    #images span { 
    display: inline-block; 
    background-color: orange; 
    } 
</style> 

Answer 3

Heres toàn bộ điều

<script type="text/javascript"> 
$(function(){ 
     $("img").hover(function(){ 
          $(this).fadeTo("slow",0); 
          }, 
          function(){ 
          $(this).fadeTo("slow",1);  
          }); 
}); 
</script> 
<style type="text/css"> 
#lookhere{ 
    background-color:orange; 
    width:auto; 
} 
</style> 
Heres the html 
<div id="lookhere"><img href="you know what goes here"></div> 

Nó hoạt động và trông khá mát mẻ. Ý kiến ​​hay.