Question

我正在尝试制作一个非常简单的CSS悬停。它适用于IE，Edge，Chrome和Firefox，但不适用于Mac上的Safari（9.1）。

已经搜索了互联网和Stack Overflow以获得修复，但没有快乐。

在codepen上找到了这个简单的例子。这适用于野生动物园。

但是：如果我接受该代码，将其放入一个普通的html文档并从Azure提供它，它在悬停时不起作用。您必须单击/关闭元素，以显示悬停时应显示的位。奇怪的是，如果我使用Web检查器并切换悬停状态，它就可以工作。示例代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        #thumbnail {
            display: block;
            width: 150px;
            height: 150px;
        }

            #thumbnail:hover + #title {
                display: block;
            }

        #title {
            display: none;
            color: #ffffff;
            background-color: #000000;
            text-align: center;
            width: 130px;
            padding: 10px;
        }
    </style>


</head>
<body>

    <a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
    <div id="title">filename.jpg 1</div>
</body>
</html>

然后我创建了一个plnkr来查看codepen中是否有其他内容。插件也适用于Mac上的Safari。

我需要做些什么才能让它在标准页面中运行？

Answer 1

我已经测试了您的codepen示例，甚至创建了一个包含上述内容的HTML文件，并在Safari 9.1.1中再次对其进行了测试 - 一切正常。

您可能会发现问题是Safari从Azure缓存您的内容，您是否可以清除Web浏览器缓存并重试该问题？

也许Azure上的缓存也需要清除？

CSS悬停不适用于Safari

1 个答案: