CSS hover not working on Safari
<p>I am trying to make a really simple CSS hover. It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac.</p>

<p>Have searched the internet and Stack Overflow for a fix, but no joy. </p>

<p>Found this simple example on <a href="https://codepen.io/Pixelizm/pen/ICpKv/" rel="nofollow">codepen</a>. That works on safari. </p>

<p>BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. 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. Example code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;style&gt;
        #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;
        }
    &lt;/style&gt;


&lt;/head&gt;
&lt;body&gt;

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

<p>I then created a <a href="https://plnkr.co/edit/CmsD2xfcGKQ0cGY6omwt" rel="nofollow">plnkr</a> to see if something extra was going on in codepen. The plunk also works in Safari on Mac.</p>

<p>What do I need to do to get it working in a standard page please?</p>