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;”，委托事件然后使用addClass vs 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");
});

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

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

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

1 个答案: