Question

我正在尝试对我的网站进行一些优化，它让我看到了一个非常常见的主题，但我找不到像我一样的问题。

我有什么。图像精灵（模糊/清晰）和文本顶部。当你在图像上盘旋时，它会变得清晰，当你在文本上盘旋它会突出显示并变成蓝色。（图像将保持清晰）

我想要什么。将精灵缩减为一个图像（而不是二合一），因为它是我主页面上的最大文件，并且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>

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

您可以使用相邻的兄弟选择器。（further details）它虽然在老版浏览器中不起作用（猜猜哪个）。

您必须稍微交换HTML的顺序。基本上先放置文本然后使用这样的东西：

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

现在你无法在H3上设置悬停，但为什么不只是设置h3而不是#photo-text元素，那么它就能正常工作。

编辑：精美的颜色协调js小提琴让你看看：http://jsfiddle.net/will/Gt8KX/

希望有所帮助：）

悬停不透明度＆amp;文字困境

1 个答案: