4

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

我的 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>
4

2 回答 2

1

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

于 2012-12-11T17:43:09.783 回答
0

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

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

如果要保持一致，还应该将backgroundCSS 属性从#menuMusica移至#menuMusica a.

于 2012-12-11T17:41:56.233 回答