Css 悬停不透明度&；文本灾难

我正试图在我的网站上做一些优化，这让我想到了一个似乎很常见的话题，但我还没有找到一个和我的问题很像的问题

我所拥有的。一个图像精灵（模糊/清晰）和上面的文本。当您将鼠标悬停在图像上时，图像会变得清晰，当您将鼠标悬停在文本上时，图像会高亮显示并变为蓝色。（图像将保持清晰）

我想要什么。将精灵缩小为一个图像（而不是二合一），因为它是我主页上最大的文件，57%的加载时间都花在图像上

我所做的：

1） 从一个精灵变成了一个清晰的形象

2） 创建了一个新的“foggy img”div容器，将其放置在图像顶部，白色，不透明度：0.15

3） 为文本创建了一个新的div“img text”容器，将其放置在“foggy img”之外，这样不透明度就不会影响它，并将它很好地放置在应该的位置

问题：它很小，透视框很好地取代了雪碧，并且工作正常。文本也很好地突出显示。但是当鼠标悬停在文本上方时，透明框再次变得“模糊”

当鼠标悬停在一个单独的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>

---

您可以使用相邻的同级选择器。 () 不过，它在较旧的浏览器中不起作用（猜猜是哪个）

您必须稍微交换一下HTML的顺序。基本上，先把文本放在第一位，然后使用如下内容：

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

现在你无法在H3上设置悬停，但为什么不直接设置H3而不是#photo text元素，这样就可以了

编辑：色彩协调精美的js提琴供您查看：

---

希望有帮助：）

没有。这两种效应是相互排斥的。当

文本

div悬停时（使用纯CSS），获得

文本

效果的唯一方法是使

文本

成为

雾

的子对象。正如你所指出的，这会影响文本的不透明度。嘿，我一直在尝试使用你的建议，但它似乎不起作用。我把你的小提琴改成了我的img。当你把鼠标悬停在文本上时，你能摆弄它使框保持黄色吗？（文本也像现在一样高亮显示）。我不得不稍微修改一下HTML，但它现在可以工作了：非常感谢！我担心我花了这么多时间只是为了走到一条死胡同，我不得不玩z-index，但它现在可以工作了，我的网站也因此变得更快。感谢您的帮助：）

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