jQuery的圖像懸停顏色疊加

我似乎無法找到任何這種例子已經在互聯網上的任何地方進行前，但這裏是我要嘗試這樣做......我試圖去幹淨可能的解決方法。jQuery的圖像懸停顏色疊加

所以我有一個形象的畫廊，圖像都是不同的大小。我想要這樣做，以便在鼠標懸停圖像時，它會變成橙色陰影。只是一個簡單的懸停效果。

我想這樣做，而不使用圖像交換，否則我不得不爲每個單獨的畫廊圖像的橙色懸停的形象，我想這更有活力一點。

我的計劃是隻在背景顏色，寬度和高度100％，不透明度爲0的情況下，在圖像上定位一個空白div。然後使用jquery，在mouseover上我將不透明度淡入0.3左右，並在鼠標移出時消失爲零。

我的問題是，這將是佈局的HTML和CSS，以高效，乾淨做到這一點的最好辦法。

這裏有一個簡短的，但不完整的設置：

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

來源

2010-06-13 goddamnyouryan

因此，讓我們開始稍微簡單的HTML：

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

這裏是我的解決方案：

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

編輯：隨着快速褪色，淡出：

$('#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'); 
});

來源

2010-06-13 04:25:15 artlung

這個很好用，謝謝！我如何添加快速淡入和淡出？ – goddamnyouryan 2010-06-13 04:53:40

添加了淡入淡出效果。 – artlung 2010-06-13 11:30:32

您正在尋找這樣的事情：

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

來源

2010-06-13 04:21:12

是的......但我應該如何設置CSS以使其正常工作。 – goddamnyouryan 2010-06-13 04:37:22

對不起。我已經完成了，但我忘了將它添加到昨晚的帖子。往上看。 – 2010-06-13 11:54:45

繼承人的整個事情

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

它的工作原理，看起來很酷。好主意。

來源

2010-06-13 04:41:37 Theopile

jQuery的圖像懸停顏色疊加

回答

相關問題