Question

我有以下代码用于显示使用纯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; }

Answer 1

我进一步研究了这一点，当与伪类一起使用时，似乎有bug with older versions of Webkit和相邻/一般兄弟选择器。

Safari 4 div：悬停支持

1 个答案: