表 TD 上的 CSS 精灵答案

【问题标题】：CSS Sprites on Table TD表 TD 上的 CSS 精灵
【发布时间】：2023-03-20 11:06:01
【问题描述】：

我想用 CSS 精灵制作一个菜单，但地球上没有一个浏览器可以读取它。我的问题可以在here找到。

我的 CSS 是：

#menuMusica{
  width:340px;
  height:190px;
  background:url('images/menuMusic.png') 0px 0px;
}

#menuMusica a:hover{
  background: url('images/menuMusic.png') 0px -190px;
}

还有我的 HTML：

<div id="menu">
  <table cellspacing=100px>
    <tr>
        <td id="menuMusica" onmouseover="soundGuitar();">
        <a href="javascript:;" onclick="alerter('This site is under construction! Come back soon. You can always follow me on Facebook and Twitter!');"><img  src="images/menuP.png" border=0></a>
      </td>
        <td id="menuPhoto" onmouseover="soundPhoto();">
        <a href="photo/index.html"><img src="images/menuP.png" border=0></a>
      </td>
    </tr>
  </table>
</div>

【问题讨论】：

根据我的经验，表格和精灵不能很好地混合。在您的情况下根本不应该使用表格......

标签： html css menu interactive sprite

【解决方案1】：

将#menuMusica a:hover { 更改为#menuMusica:hover {。

【讨论】：

据我了解，这不适用于较旧的 IE 浏览器。他们只在 a 元素上渲染 :hover css。
@DMoses 在 IE7 中测试并且工作正常。不了解 IE6（也不太在意）
非常感谢大家，终于在 a:hover 和 hover 之间进行了更改，效果很好（稍作调整）。

【解决方案2】：

问题是“鼠标悬停”背景应用于您的td 元素，但您的“鼠标悬停”背景应用于其中的a 元素。由于a 元素没有填满所有可用的垂直空间，因此您看不到翻转。

最快的解决方案是将display: block; 添加到a 元素的样式中。

如果要保持一致，还应该将background CSS 属性从#menuMusica 移动到#menuMusica a。

【讨论】：

同时添加高度/宽度 100% 并移除 img 子元素
@DMoses 这些更改对我的浏览器没有任何明显影响，尽管它们会稍微缩短加载时间。