hover effect with css

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

Answers


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/


Need Your Help

What javascript engine used inside javafx?

java javascript javafx

WebView has built-in javascript engine. What engine is used for it? Is it the same for openjdk and oracle jdk? May it be used separately from WebView, just as JSR 223 engine?

What are the negative side effects to increasing sequel max_connections and pool_timeout?

ruby sqlite3 sequel

I was getting Sequel::PoolTimeout errors and so I increased the :max_connections to 10 and the :pool_timeout to 10