Fix for Opera's bug with visibility transition

by kizu

HTML

<div class="test">
    <div class="inner">Some popup that is long enough<br/>and that spans at least at two lines</div>
    Hover me! <a href="#">Just some link</a>
</div>
<a href="#">Some another link</a>

CSS

.test {
    position: relative;
    background: #888;
}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    
    opacity: 0;
    visibility: hidden;
    
    -webkit-transition: opacity 1s, visibility 1s;
       -moz-transition: opacity 1s, visibility 1s;
         -o-transition: opacity 1s, visibility 1s;
            transition: opacity 1s, visibility 1s;

    background: #9F9;
}

.test:hover .inner {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}

A:hover {
    color: #F00;
}