Hover-Effekt mit CSS

Question

Dieser Code wird einige Blinksignale auf divs ausgeben, wenn wir die Maus darüber bewegen. Was ich will ist, zeige den Inhalt des versteckten Div, wenn die Maus über dem roten Div ist. Aber mit den "Blitzen" hat der Effekt nicht richtig funktioniert.

Irgendeine Idee darüber?

<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

Nicht sicher, ob dies ist, was Sie suchen, aber hier geht es. Der Trick besteht darin, das versteckte Div in das andere zu legen.

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/