javascript - 圆形图像 - 在悬停时应用色调

Question

我正尝试在悬停某些图像时应用 #e30009 色调。

我尝试使用 Javascript 和放置在图像上的 div，但是叠加层在鼠标悬停时一直闪烁？

查看我的 JSFiddle:http://jsfiddle.net/vX96M/

$(document).ready(function() {
    overlay = $("#overlay");
    img = $('#rob');
    overlay.width(img.css("width"));
    overlay.height(img.css("height"));
    overlay.css("top", img.offset().top + "px");
    overlay.css("left", img.offset().left + "px");
    overlay.css('opacity',0);
    $('#rob').delay(500).hover(function() {
        $('#overlay').fadeTo('slow',0.9);
    })
})

我也尝试过使用纯 CSS，但我似乎无法获得正确的颜色。我做了:

img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }

Answer 1

这里最好的办法是将叠加层设置为“display:none;”，委托(delegate)事件，然后使用 addClass 与 removeClass 函数。主要问题是叠加层干扰了鼠标悬停事件，因此只需为此添加另一个功能。请参阅下面的 jsfiddle:

http://jsfiddle.net/vX96M/2/

$(document).on('mouseenter', "#myimg", function () {
   $('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
   $('#overlay').removeClass("show-as-block");
});

$(document).on('mouseenter', "#overlay", function () {
   $('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
   $('#overlay').removeClass("show-as-block");
});

还应该设置叠加层的宽度和高度，然后有一个类显示为 block 。

.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
 display:block;
}