Question

I would like to drop down a div with further information when the mouse is hovering over another div and am unsure how i should organize this. I have the following: http://quaaoutlodge.com/drupal-7.14/ and I would like that if one hovers over the Book Now area, that the TEST-div drops down as long as the cursor is over Book Now or TEST and it should drop up again as soon as the cursor leaves the area. How do I best go about this?

To get something similar to what you can see on http://www.thedana.com/, I tried to implement some onmouseover javscript code that shall be executed when hovering over the book now div. I just try to change the height of my element statically first like this:

      function dropbox(element){
    obj = document.getElementById(element);
    if(obj) {
      obj.style.min-height = "400px";

    } else {
    }
  }

but I can’t get it going. The eventual goal is to have a loop with some delay to slowly drop down the book now tab.

Answer 1

Used JQuery instead and it seems to work fine:

  <script src="./path/to/jquery.js"></script>
  <script>
  $(function() {
        var fade = $('#fade');
        $('#book').hover(function() {
          fade.fadeIn();
        }, function() {
          fade.fadeOut();
        });
      });

with my html looking like this:

<div style="" id="book">Book Now<br/> <!-- hover div-->
    <div class="fade" id="fade"> <!-- drop down div set to display:none; in css-->