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

Question

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

所有这些都工作正常，但是，问题来了:当用户将鼠标悬停在图像上时，如果光标移动到先前隐藏的 div (.post-info)，图像返回灰度。如果可能的话，我想保留它的颜色。另外，如果有更优雅、跨浏览器、移动友好的方式来实现这一点，请随时分享。我一直在努力学习如何更优雅地编写代码。

fiddle :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;
}

更新 fiddle :http://jsfiddle.net/Lhbfsay7/