CODEWITHSUNDEEP
jqueryhtmlcss
Alex Sadler
Alex Sadler

Reputation: 433

Hover Div System

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

Upvotes: 0

Views: 208

Answers (4)

Ole Melhus
Ole Melhus

Reputation: 1929

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;
}

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630429

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.

Upvotes: 3

m.edmondson
m.edmondson

Reputation: 30892

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.

Upvotes: 0

NimChimpsky
NimChimpsky

Reputation: 47290

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

Upvotes: 0

Related Questions