HTML + CSS 图像上的文本淡入淡出阻止淡入淡出的发生

Question

这是我的第一个问题。到目前为止，我设法通过搜索找到了所有答案，但不是现在。

我创建了一个简单的交叉淡入淡出图像效果，用作菜单按钮的高亮显示。接下来我想在上面放一些文本，但结果是将鼠标悬停在文本上会阻止交叉淡入淡出效果的触发。我可以为每个菜单项生成静态图像，但我想知道是否有一个简单的解决方案可以防止站点因冗余图像而膨胀。

有问题的代码:

jsfiddle: http://jsfiddle.net/halfblack/2MCWm/4/

HTML

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="42">
            <div id="cf">
                <a href="#">
                    <span>Sample text</span>
                    <img class="bottom" src="http://i.imgur.com/ffYHwLW.png" />
                    <img class="top" src="http://i.imgur.com/t3TW5LG.png" />
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td height="42">
            <div id="cf">
                <a href="#">
                    <img class="bottom" src="http://i.imgur.com/ffYHwLW.png" />
                    <img class="top" src="http://i.imgur.com/t3TW5LG.png" />
                </a></div>
        </td>
    </tr>
</table>

CSS:

html, body {height:100%;}

}

#cf {
  position:relative;
  height:42px;
  width:172px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;

}

#cf a {
  text-decoration:none;}

#cf span {
    position: absolute;
    top: 10;
    left: 10;
    font-family: 'Arial';
    font-size: 18px;
    color: #FFFFFF;
    z-index: 2;

}

#cf img.top:hover {
  opacity:0;
}

Answer 1

添加 #cf span:hover ~ img.top{opacity:0;} 就可以了。将鼠标悬停在跨度上时，它会触发与悬停在图像本身上相同的操作。

虽然这是您的问题的答案，但我建议您只在您的 tds 上使用背景图片，而不是一遍又一遍地粘贴多张图片。

我有这个Fiddle对您来说，您的代码已经过非常优化。