Question

I have the following code I’m using to display rollovers using purely HTML and CSS. When you hover over the text, it changes the left and right images.

Works great in all the browsers I tested, except Safari 4. From what I gathered, Safari 4 supports div:hover and general siblings (~). I know it’s a little older, but can anyone tell me why this won’t work in Safari 4? If I can fix it, I’d like to.

<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

I looked into this further and it appears that there is a bug with older versions of Webkit and the adjacent/general sibling selectors when used with pseudo classes.