CSSを使用したホバー効果

Question

このコードでは、マウスオーバーするとdivにいくつかの点滅が出力されます。私が望むのは、マウスが赤いdivの上にあるときに隠れたdivの内容を表示することです。しかし、 "フラッシュ"の効果は適切に機能しませんでした。

これについてのご意見はありますか？

<div class="content"> 
    <div class="absolute"></div> 
    <div class="new_l"><a href="#">---links</a></div> 
</div> 

.content { 
    width: 195px; 
    margin-top: 15px; 
    border:1px solid red; 
} 

.content>.new_l { 
    width: 195px; 
    height: 20px; 
    z-index: 0; 
    position: relative; 
    display: inline-block; 
} 

.content>.absolute { 
    width: 195px; 
    height: 20px; 
    position: absolute; 
    z-index: 1; 
    background-color: red; 
    display: inline-block; 
} 

.content>.absolute:hover { 
    display: none; 
} 

demo

Answer 1

これはあなたが探しているが、ここでは何が起こっているかどうかわかりません。トリックは、隠れたdivをもう一方の内側に置くことです。

HTML

<div class="content"> 
    <div class="absolute"> 
     <div class="new_l"><a href="#">---links</a></div> 
    </div> 
</div> 

CSS

.content { 
    width: 195px; 
    margin-top: 15px; 
    border:1px solid red; 
} 

.new_l { 
    width: 195px; 
    height: 20px; 
    background-color: #ccc; 
    display:none; 
} 

.absolute { 
    width: 195px; 
    height: 20px; 
    background-color: red; 
} 

.absolute:hover .new_l { 
    display: block; 
}​ 

http://jsfiddle.net/uFsUa/1/