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，您的代码已经过优化。

HTML + CSS文本图像交叉淡化阻止交叉淡化发生

1 个答案: