Question

I am having trouble developing a jQuery ‘object’. I would like div1 (Refer to image below) to be the background div with an image in (Using a background image). I would then like div 2 (Refer to image below) to overlay div 1, which I can do. However, as I have little experience with jQuery it’s the next part I’m struggling with. I would like, when you hover on div 2, I use jQuery slideDown() / slideUp() to show and hide div 3 (Refer to image below). It also needs to not close as it slides up (as the cursor will no longer be on div 2). Only when you’re no longer hovering over the whole object will it close. I hope this makes sense… I just don’t know where to start. If any more info is needed please ask.

Answer 1

Something like this should do it I believe, or at least it gives you a starting ground to play around with, and improve further.

Markup

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

.wrapper {
    float: left;
}
.one {
    background-color: grey;
    width: 100px;
    height: 100px;
}
.two {
    background-color: blue;
    width: 100px;
    height: 20px;
}
.three {
    background-color: green;
    width: 100px;
    height: 100px;
    display: none;
}​

JavaScript

$(function () {
    $(".two").mouseenter(function (){
         $(".one, .three").slideToggle();
    });
    $(".wrapper").mouseleave(function (){
         $(".one, .three").slideToggle();
    });
});​

A live example: http://jsfiddle.net/ZHxe5/1/