CODEWITHSUNDEEP
jqueryhovermouseover
zeekrey
zeekrey

Reputation: 451

jQuery - extended menu

I'd like to realize the following. I've got several small images and if the mouse is on one of the images, a div or some buttons should become visible. But if the mouse moves to another image, another div (buttons) should be displayed and the old div should be hidden. If no image is selected nothing should be displayed. Is there any function in the jQuery library to do something like that?

I tried to do this with a mouseover function and toogle(). But the problem is, when the mouse leaves the image, the recently displayed div is is hidden again. In addition, if I set the div to visible on mouseover it will still be displayed even if another image is selected.

<div id="Div1">This is div1</div>
<div id="Div2">This is div2</div>​

When the mouse goes over "div1", "div2" should be displayed until the mouse leaves "div1" or "div2". This means, ifthe mouse goes over "div2" (mouse left "div1"), "div2" should still be displayed.

Upvotes: 2

Views: 439

Answers (1)

Sparky
Sparky

Reputation: 98738

It sounds like you want jQuery hover. It's difficult to provide an exact answer since your question contains no code but this fits what you've described.

$(document).ready(function() {
    $("#myDiv").hover(
      function() {
        $("#otherDiv").show();
      }, 
      function() {
        $("#otherDiv").hide();
      }
    );
});

jsFiddle DEMO

EDIT

$(document).ready(function() {
    $("#wrapper").hover(
      function() {
        $("#otherDiv").show();
      }, 
      function() {
        $("#otherDiv").hide();
      }
    );
});​

CSS:

#otherDiv {
    display: none;
}

HTML:

<div id="wrapper">
    <div id="myDiv">hover me</div>
    <div id="otherDiv">stuff</div>
</div>​

Updated Demo

Upvotes: 1

Related Questions