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를 다른 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/