4

CSSスプライトを使用してメニューを作成したいのですが、それを読み取ることができるブラウザは地球上に1つもありません。私の問題はここにあります。

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

問題は、「マウスアウト」の背景がtd要素に適用されますが、「マウスオーバー」の背景がa要素内の要素に適用されることです。a要素は使用可能な垂直方向のスペースをすべて埋めていないため、ロールオーバーは表示されません。

最も簡単な解決策は、要素display: block;のスタイルを追加することです。a

一貫性を持たせたい場合は、backgroundCSS プロパティも から#menuMusicaに移動する必要があります#menuMusica a。

于 2012-12-11T17:41:56.233 に答える