我正在尝试制作一个非常简单的 CSS 悬停。它在 IE、Edge、Chrome 和 Firefox 中运行良好，但不适用于 Mac 上的 Safari (9.1)。
已在 Internet 和 Stack Overflow 上搜索过修复程序，但没有找到答案。
在 codepen 上找到了这个简单的例子.这适用于 Safari 。
但是:如果我采用该代码，将其放入纯 html 文档并从 Azure 提供，它在悬停时不起作用。您必须单击打开/关闭应该在悬停时显示的位的元素。奇怪的是，如果我使用网络检查器并切换悬停状态，它就可以工作。示例代码:
<!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 中是否发生了一些额外的事情。 plunk 也适用于 Mac 上的 Safari。
请问我需要做什么才能让它在标准页面中工作？
最佳答案
我已经测试了您的 codepen 示例，甚至创建了一个包含上述内容的 HTML 文件，并在 Safari 9.1.1 中再次对其进行了测试 - 一切正常。
您可能会发现问题是 Safari 缓存了您来自 Azure 的内容，您可以清除 Web 浏览器缓存并重试该问题吗？
也许 Azure 上有一个缓存也需要清除？
关于html - CSS 悬停不适用于 Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38225543/