Hover Div System

Question

Say I have a div with a link in it. When I hover over it I want another div to fade in above it with some content and then fade away on mouse over.

Example found here: http://bit.ly/c59sT4

Answer 1

I would use jquery and its fadeIn and fadeOut functions, in conjunction with hover

Answer 2

For that you'll want to use JQuery in particular the .hover() event. Once you get to grips with it you'll find it trivial to do tasks like this that work cross browser.

Answer 3

You can do something re-usable using .hover() and the fading functions, like this:

$(".container").hover(function() {
    $(this).find(".hover").fadeIn();
}, function() {
    $(this).find(".hover").fadeOut();
});

For example, here's the demo markup, though the <div> elements can contain anything:

<div class="container">
    <div class="hover">
        Content Here
    </div>
    <a href="#">Link</a>
</div>

Then via CSS you just position that inside <div> absolutely and the give it the same size, like this:

.container, .hover { width: 100px; height: 300px; background: white; }
.hover { position: absolute; display: none; }

You can give it a try here.

Answer 4

Are you looking for this kind of solution? Check this

Answer 5

html:

<div id="container">
  <a href="#" id="link">Link</a>
  <div id="divtofadein">some content here</div>
</div>

js:

$(function(){
 $("#divtofadein").mouseout(function(){
  $(this).fadeOut();
 })
   .hide();

 $("#link").click(function(){
  $("#divtofadein").fadeIn();
 });
});

css:

#container {
position: relative;
width: 100px;
height: 200px;
}

#link {
position: absolute;
top: 0px;
left: 0px;
}

#divtofadein {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 200px;
background: #FFF;
}