Question

我有一个动态图库，其图像是从数据库中提取的。我需要做的是用颜色覆盖图像，然后在鼠标悬停时删除颜色。颜色为80％的蓝色。

我在这个论坛上找到了类似的东西，与我想要的相反 - 它在鼠标悬停时添加颜色（使用Jquery）而不是删除它。但是，我不是Jquery专家，无法弄清楚如何重新编写脚本以初始设置颜色，在鼠标悬停时将其删除。

这是当前的代码：

<script type="text/javascript">
$(document).ready(function() {
$('#project1 a').bind('mouseover', function(){
    $(this).parent('div').css({position:'relative'});
    var img = $(this).children('img');
    $('<div />').text(' ').css({
        'height': img.height(),
        'width': img.width(),
        'background-color': '#4f99ff',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0.8
    }).bind('mouseout', function(){
        $(this).remove();
    }).insertAfter(this);
});

});
</script>

<div id="project1"><a href="#"><img src="image.jpg" width="614" height="218" alt="" /></a></div>

有人可以建议如何扭转上述功能来做我需要的吗？

提前致谢！

Answer 1

您可以简单地在页面上，每张图片上静态添加叠加div，然后在鼠标悬停时隐藏它，并在mouseout上显示，并具有漂亮的渐变效果。这将是这样的，从JS的角度来看这更简单：

<style>
#project1 {
    position: relative;
}
.blueoverlay {
    background-color: #4f99ff; position: absolute; top: 0; left: 0; opacity: 0.8;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#project1').mouseover(function() {
        $(this).find('.blueoverlay').hide();
    })
    .mouseout(function(){
        $(this).find('.blueoverlay').show();
    });
});
</script>

<div id="project1">
    <a href="#"><img src="http://www.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" width="300" height="300" alt="" /></a>
    <div class="blueoverlay" style="width:300px;height:300px;">&nbsp;</div>
</div>

Answer 2

这看起来过于复杂。我的解决方案是显示一个div作为背景图像的照片，然后，在div内，放置你想要的半透明.png颜色。假设div具有“photoholder”类，而半透明图像具有“overlay”类：

<div class="photoholder"><img src="mypng.png" class="overlay" /></div>
<script>
    $(".photoholder").mouseenter(function() {
        $(".overlay").hide();
    }).mouseleave(function() {
        $(".overlay").show()
    });
</script>

Answer 3

查看.bind部分（$('#project1 a').bind('mouseover', function(){和}).bind('mouseout', function(){）？只需撤消mouseover和mouseout部分，它就可以正常工作。

Jquery图像叠加

3 个答案: