css - 悬停不透明度和文本字

Question

我正尝试在我的网站上做一些优化，这让我想到了一个似乎很常见的话题，但我一直没能找到与我的问题完全相同的问题。

我所拥有的。图像 Sprite (有雾/清晰)和上面的文字。当您将鼠标悬停在图像上时，它会变得清晰，当您将鼠标悬停在文本上时，它会突出显示并变为蓝色。 (图像将保持清晰)

我想要的。将 sprite 缩减为一张图片(而不是合二为一)，因为它是我主页上最大的文件，我 57% 的加载时间都花在了图片上。

我做了什么:

1) 从一个 Sprite 变成只有一个清晰的图像。

2) 创建了一个新的 'foggy-img' div 容器，把它放在图像的顶部，白色，不透明度:0.15

3) 为文本创建了一个新的 div 'img-text' 容器，将其放在 'foggy-img' 之外，这样不透明度就不会影响它，并将它放在它应该在的地方。

问题:它很小，透明框很好地替代了 sprite 并且可以正常工作。文本也很好地突出显示。但。当将鼠标悬停在文本上时，透明框再次变得“模糊”。

将鼠标悬停在单独的 div 中的文本上时，是否有任何方法可以使“模糊框”保持清晰？

HTML:

 <div id="photo-feature">
    <a href="services.html">
        <div id="img">
            <div id="photo-fog"></div>
            <div id="photo-text"><h3>Learn More...</h3></div> 
        </div>
    </a>
</div>

CSS:

#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }

#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }

#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }

Answer 1

您可以使用相邻的 sibling 选择器。( further details )不过，它在旧版浏览器中不起作用(猜猜是哪个)。

您将不得不稍微调换 HTML 的顺序。基本上把文本放在第一位，然后使用这样的东西:

#photo-text:hover + #photo-fog { // Do something

现在您无法在 H3 上设置悬停，但为什么不直接设置 h3 的样式而不是 #photo-text 元素，这样就可以正常工作了。

编辑: 漂亮的颜色协调 js fiddle 供您查看:http://jsfiddle.net/will/Gt8KX/

希望对您有所帮助:)