显示 block 上的 CSS 闪烁

Question

我有一个隐藏的 div，我想在悬停另一个 div 时显示它。我得到了想要的结果，但出现了不希望出现的闪烁。看这里http://jsfiddle.net/CL7gj/

HTML

<div id="basin-stlaw"></div>
<div id="stlaw"></div>

CSS

#basin-stlaw:hover + #stlaw { display:block }

#basin-stlaw {
    width:300px;
    height:250px;
    -ms-transform: rotate(35deg); /* IE 9 */
    -webkit-transform: rotate(35deg); /* Chrome, Safari, Opera */
    transform: rotate(35deg);
    left:620px;
    top:75px;
    position:absolute;
    border: thin dotted #39C;
}
#stlaw {
    background-color:red;
    position:absolute;
    width:900px;
    height:589px;
    top:0;
    left:0;
    display:none;
    }

Answer 1

更改选择器以在悬停时包含元素 #STLaw:

Updated Example Here

#basin-stlaw:hover + #stlaw, #stlaw:hover {
    display:block
}

..或者，in supported browsers , 你也可以使用 pointer-events:none不同的结果。

Example Here

#basin-stlaw:hover + #stlaw {
    display:block;
    pointer-events:none;
}