使用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/