0

各テーブルセルにハイパーリンクを使用してロールオーバー画像を作成しようとしていますが、何らかの理由で、作成する後続の各セルがその前のセルをオーバーライドしています.:. 各セルは繰り返される画像になります。私が最初にコードを書いたとき、コードは正常に機能しました。これは完全に思いがけないことです。隣接する 2 つのセルのイメージ コードを次に示します。何らかの理由で、2 番目のセルが 1 番目のセル イメージとして表示され続けます。

<table style="width: 655px; height: 630px; border: 2px dotted black;">
<tbody>
<tr align="center">    
<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
.rollover a:hover{display: block;
  width:210px;
  height: 155px;
  background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td>

<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
.rollover a:hover{display: block;
  width:210px;
  height: 155px;
  background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td></tr></tbody></table>
4

1 に答える 1

0

HTML のより大きなチャンクがなければ、これがページにそのまま含まれていると想定しています。<style>要素はページの一部に限定されません。したがって、ページにこれら 2 つのスタイル要素がある場合、最後のステートメントが最初のステートメントをオーバーライドし、両方の div に影響を与えます。

これを解決するには、次のように、それぞれdivまたはa特定のセレクターを指定する必要がありidます。

<style type="text/css">
#first-div.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
#first-div.rollover a:hover{
  background-image: url( IMG1b );}

#second-div.rollover a {display: block;
  width: 185px;
  height: 131px;
  background-image: url( IMG2a );}
#second-div.rollover a:hover{
  background-image: url( IMGb );}
</style>

<div class="rollover" id="first-div">
  <a href="link1"></a>
</div>
<div class="rollover" id="second-div">
  <a href="link2"></a>
</div>

いつものように、タグにあなたを含めるか、別のファイル<style>に含めることをお勧めします!<head>

于 2012-11-08T16:13:38.293 に答える