Question

我有这个图片......

http://cheesecake.webparity.net/

我对HOVER的闪烁......

另外，我希望在悬停时能够轻松地进出图像（颜色）......最后，我想确保这会有响应，但我认为这没问题。

这是CSS：

/* Grayscale rollover */
.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari 
*/
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
#layer-0, #layer-1, #layer-2, #layer-3, #layer-4 {
     color: #fff;
}

#currlayer {
    position: absolute;
    z-index: 10;
    float: right;
    right: -5px;
    top:-20px;
    z-index: 20;
}

#map-image {
    position: absolute;
    z-index: 10;
    float: right;
    right: -5px;
    top:-20px;
    z-index: 10;
}

.column-2 li {
    padding: 5px 0;
}
.columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
}
.column-2 {
    position: relative;
    width: 16.66667%;
    float:left;
}
.column-09 {
    position: relative;
    width: 75%;
    float:right;
}
.layers {
    position: relative;
    top:10px;
}
.layers p {
    font-size: 12px;
    color: #fff !important;
    font-weight: normal;
}
.layer-default {
    background:#444;
    padding:5px 15px 47px;
    width: 40%;
}

这是我认为问题所在的Javascript：

当我在MAP AREA上方时，我正在使用data-layersrc并将其用于填充

$("area").hover(function () {
    $layer = $(this).attr("href");
    $(".layer-default > div").addClass("hidden");
    $($layer).removeClass("hidden");
    console.log("Image is: " + $(this)[0].dataset.layersrc);
    $("#currlayer").attr("src", $(this)[0].dataset.layersrc.replace("../", ""));
    $("#currlayer").removeClass("hide").addClass("show");

}, function () {
    $(".layer-default > div").addClass("hidden");
    $("#layer-0").removeClass("hidden");
    $("#currlayer").addClass("hide").removeClass("show");
});

$(document).ready(function () {
    $('#Map').imageMapResize();
});

我认为闪烁的原因是我没有滚动一次，但每次移动鼠标时它都会被重复。

查看此链接以查看我想要实现的目标。 ROLLOVER显示突出显示的ZONES，没有闪烁。

这就是我想要实现的目标。

实施例： http://jsfiddle.net/eLbpmsaj/

或者这是我认为最好的版本： https://codepen.io/keishaperry/pen/OMarZQ

如何使用css3和jquery在悬停时摆脱FLICKER？

0 个答案: