Safari 4 div：悬停支持

Question

我用下面的代码来显示使用纯粹的HTML和CSS翻转。当您将鼠标悬停在文本上时，它会更改左侧和右侧图像。

在除Safari 4之外的所有浏览器中都很出色。从我收集的信息来看，Safari 4支持div：悬停和一般兄弟（〜）。我知道它有点老，但任何人都可以告诉我，为什么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和相邻/一般同胞选择。