hover effect with css

Question

This code will output some blinks on divs when we do the mouse over. What i want is show the content of the hidden div when the mouse is over the red div. But with the "flashes" the effect didn't works properly.

Any idea about that?

<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

Not sure if this is what you're looking for, but here it goes. The trick is to put the hidden div inside the other one.

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/