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的图像悬停颜色叠加

回答

相关问题