CODEWITHSUNDEEP
javascripthtmlcssonmouseover
stdcerr
stdcerr

Reputation: 15598

drop down div on hover over

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.

Upvotes: 1

Views: 2660

Answers (4)

stdcerr
stdcerr

Reputation: 15598

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

Upvotes: 0

stdcerr
stdcerr

Reputation: 15598

seems like I have edit obj.style.height instead of .min-height and it works fine.

Upvotes: 0

polin
polin

Reputation: 2835

you can use this code or (reference: w3schools.com)

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").hover(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

Upvotes: 1

Musa
Musa

Reputation: 97672

You can try a css approach

#book + div{
    display:none;
}
#book:hover + div{
    display:block;
}

+ selector

Upvotes: 3

Related Questions