0

純粋なHTMLとCSSを使用してロールオーバーを表示するために使用している次のコードがあります。テキストにカーソルを合わせると、左右の画像が変わります。

Safari 4を除いて、テストしたすべてのブラウザーでうまく機能します。私が収集したものから、Safari 4はdiv：hoverと一般的な兄弟（〜）をサポートしています。少し古いことは知っていますが、Safari 4でこれが機能しない理由を誰かに教えてもらえますか？直せたら直したいです。

<div id="rollover-wrapper">
  <div class="rollover-text" id="rollover-top1">Availability</div>
  <div class="rollover-text" id="rollover-middle1">Audience</div>
  <div class="rollover-text" id="rollover-bottom1">Aesthetics</div>

  <div class="rollover-left" id="rollover-left1"></div>
  <div class="rollover-right" id="rollover-right1"></div>
</div>


.rollover-text {position: relative; left: 200px; width: 200px; }

.rollover-left, .rollover-right { width: 193px; height: 277px; float: left; }
.rollover-left { position: relative; top: -190px; }
.rollover-right { position: relative; top: -190px; left: 210px; }

#rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-right1 { background: url(imageurl) no-repeat; }

#rollover-top1:hover ~ #rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-top1:hover ~ #rollover-right1 { background: url(imageurl) no-repeat; }

#rollover-middle1:hover ~ #rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-middle1:hover ~ #rollover-right1 { background: url(imageurl) no-repeat; }

#rollover-bottom1:hover ~ #rollover-left1 { background: url(imageurl) no-repeat; }
#rollover-bottom1:hover ~ #rollover-right1 { background: url(imageurl) no-repeat; }
4

1 に答える 1

1

これをさらに調べたところ、古いバージョンのWebkitと、疑似クラスで使用した場合の隣接/一般的な兄弟セレクターにバグがあるようです。

于 2012-08-31T14:02:21.597 に答える