jQuery图像悬停颜色叠加

Question

我似乎无法在互联网上的任何地方找到任何这方面的例子,但这是我要尝试做的事情......我正在努力寻找最简洁的方法来解决这个问题.

所以我有一个图像库,图像都是不同的大小.我想这样做,当你鼠标悬停在图像上时,它会变成橙色.只是一个简单的悬停效果.

我想在不使用图像交换的情况下执行此操作,否则我必须为每个单独的图库图像创建橙色悬停图像,我希望它更具动态性.

我的计划只是在图像上放置一个空div,背景颜色,宽度和高度100%,不透明度为0.然后使用jquery,在鼠标悬停时我将不透明度淡化为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;
}

Answer 1

那么让我们从略微简​​单的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');
});