Question

我正在使用this plugin用于跨浏览器兼容的灰度图像。基本上，图像最初处于灰度模式，具有低不透明度。当用户将鼠标悬停在图像上时，灰度渐变为彩色，不透明度返回到1，之前隐藏的div从底部向上滑动。

所有这一切都运行正常，但问题是：当用户将鼠标悬停在图像上时，如果光标移动到之前隐藏的div（.post-info），图像将返回灰度。如果可能的话，我想保持颜色。此外，如果有更优雅，跨浏览器，移动友好的方式来实现这一点，请随时分享。我总是试图学习如何更优雅地编码。

小提琴：http://jsfiddle.net/zg0jf2fb/

HTML

<article>
    <div class="post-info" style="display: none;">
        <h1 class="entry-title"><a href="/" rel="bookmark">Test</a></h1>
    </div>
    <img width="375" height="375" src="http://i.imgur.com/5Boucbt.jpg" class="grayscale grayscale-fade wp-post-image">
</article>

CSS

article {
    float: left;
    opacity: .3;
    position: relative;
    width: 375px;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}
article:hover {
    cursor: pointer;
    opacity: 1;
}
article .post-info {
    background: #000;
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}

/* Grayscale CSS */
.grayscale {
    /* Firefox 10+, Firefox on Android */
    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");

    /* IE 6-9 */
    filter: gray;

    /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
    */
    -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .2s;
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced {
    filter: none;
    -webkit-filter: none;
}

.grayscale.grayscale-replaced > svg {
    opacity: 1;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
    opacity: 0;
}

JS

// Hover titles
$('article').hover( function() {
    $(this).find('.post-info').stop().slideDown(100);
    }, function() {
    $(this).find('.post-info').stop().slideUp(100);
});

Answer 1

问题在于这两种风格：

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
    opacity: 0;
}

当您将光标移动到div时，您不再悬停img本身，因此它会返回灰度。当您将光标移动到div时，为了保持色彩，您需要在悬停article时关闭过滤器，而不仅仅是img，如下所示：

.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
    opacity: 0;
}

更新了小提琴：http://jsfiddle.net/Lhbfsay7/

将鼠标悬停在容器div上会显示隐藏的div。当光标放在隐藏的div上时，容器div的行为会发生变化

1 个答案: