将鼠标悬停在div上

Question

当鼠标悬停在另一个div上时，我想下载一个有更多信息的div，我不确定我应该如何组织它。 我有以下内容： http ： //quaaoutlodge.com/drupal-7.14/我希望如果一个人在“立即预订”区域上空盘旋，只要光标在Book Now或TEST上，TEST-div就会下降一旦光标离开该区域，它应该再次下降。 我最好怎么做？

为了得到类似于你在http://www.thedana.com/上看到的东西，我试图实现一些onmouseover javscript代码，当你将鼠标悬停在现在的div上时，它将被执行。 我只是尝试静态更改元素的高度，如下所示：

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

    } else {
    }
  }

但我不能顺利。 最终的目标是有一个延迟循环，以缓慢下拉书现在标签。

Answer 1

你可以尝试一下css方法

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

+选择器

Answer 2

你可以使用这个代码或（参考：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>

Answer 3

好像我编辑了obj.style.height而不是.min-height，它运行正常。

Answer 4

使用JQuery代替它似乎工作正常：

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

我的HTML看起来像这样：

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