gpt4 book ai didi

css - Safari 4 格 :hover Support

转载 作者:太空宇宙 更新时间:2023-11-04 15:41:09 27 4
gpt4 key购买 nike

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

最佳答案

我进一步调查了一下,似乎有一个 bug with older versions of Webkit以及与伪类一起使用时的相邻/一般兄弟选择器。

关于css - Safari 4 格 :hover Support,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12110951/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com