图像上的HTML+CSS文本交叉淡入会阻止交叉淡入

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

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

有问题的代码：

jsfiddle：

HTML

将cf span:hover~img.top{opacity:0；}添加到其中可以实现这一目的。 当将鼠标悬停在某个范围上时，它会触发与将鼠标悬停在图像本身上相同的操作

尽管这是您的问题，我建议您在tds上使用背景图像，而不是反复粘贴多个图像

---

我为您准备了这个，您的代码经过了极大的优化。

谢谢，span hover确实符合我的要求。td标签的问题在于，平滑交叉淡入淡出在Firefox中似乎不起作用，而在我的代码中却起作用。@Halfblack。无休止地粘贴图像以淡入淡出是不可能的。您可以在每个td内创建一个带有背景图像的div。也许您可以让tds保持透明，并使用：before伪元素使这些图像在其后面渲染。如果你想让我做一把小提琴来进一步帮助你，那就问问：我从来没有说过这是一个完美的解决方案，只是说这是一个有效的解决方案：不过我很高兴看到其他一些有用的解决方案。我试着在你的提琴上使用div背景淡入淡出：但在Firefox上效果是一样的——过渡在瞬间发生，没有交叉淡入淡出。

<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>

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