CSS悬停不适用于Safari

Question

I am trying to make a really simple CSS hover. 我试图做一个非常简单的CSS悬停。 It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac. 它在IE，Edge，Chrome和Firefox中运行良好，但不适用于Mac上的Safari（9.1）。

Have searched the internet and Stack Overflow for a fix, but no joy. 已经在互联网和堆栈溢出搜索中找到了解决方法，但没有任何乐趣。

Found this simple example on codepen . 在codepen上找到了这个简单的示例。 That works on safari. 这适用于野生动物园。

BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. 但是：如果我采用该代码，将其放入纯HTML文档中并从Azure提供服务，则无法在悬停状态下使用。 You have to click on/off the element for the bit that should show on hover to appear. 您必须单击/关闭该元素，以便在悬停时应显示的位出现。 Oddly, if I use the web inspector and toggle the hover state, it works. 奇怪的是，如果我使用Web检查器并切换悬停状态，则它可以工作。 Example code: 示例代码：

<!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>

I then created a plnkr to see if something extra was going on in codepen. 然后，我创建了一个plnkr，以查看Codepen中是否有其他操作。 The plunk also works in Safari on Mac. 该插件还可以在Mac上的Safari中使用。

What do I need to do to get it working in a standard page please? 我需要怎么做才能使其在标准页面上正常工作？

Answer 1

I have tested your codepen example and even created a HTML file with the contents above and tested it again in Safari 9.1.1 - all working absolutely fine. 我已经测试了您的codepen示例，甚至创建了具有上述内容的HTML文件，然后在Safari 9.1.1中再次对其进行了测试-一切正常。

You may find the issue is Safari caching your content from Azure, can you clear the web browser cache and retry the issue? 您可能会发现问题是Safari从Azure缓存内容，是否可以清除Web浏览器缓存并重试该问题？

Perhaps there's a cache on Azure that needs clearing also? 也许Azure上也有需要清除的缓存？

CSS悬停不适用于Safari

问题描述

1 个解决方案

解决方案1
2 2016-07-06 14:06:29

CSS悬停不适用于Safari

问题描述

1 个解决方案

解决方案1 2 2016-07-06 14:06:29

解决方案1
2 2016-07-06 14:06:29