悬停时下拉div答案

【问题标题】：drop down div on hover over悬停时下拉div
【发布时间】：2014-03-28 06:50:20
【问题描述】：

当鼠标悬停在另一个 div 上时，我想下拉一个包含更多信息的 div，但我不确定我应该如何组织它。我有以下内容：http://quaaoutlodge.com/drupal-7.14/ 我希望如果将鼠标悬停在 Book Now 区域上，只要光标在 Book Now 或 TEST 上，TEST-div 就会下降，并且一旦光标离开该区域。我该怎么做才最好？

为了获得类似于您在http://www.thedana.com/ 上看到的内容，我尝试实现一些 onmouseover javscript 代码，当将鼠标悬停在 book now div 上时应执行该代码。我只是尝试像这样首先静态更改元素的高度：

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

    } else {
    }
  }

但我做不到。最终的目标是有一个延迟的循环来慢慢地下拉 book now 选项卡。

【问题讨论】：

不，还没有....当您将鼠标悬停在“检查可用性”上时，我想获得类似 thedana.com 的下降效果

标签： javascript html css onmouseover

【解决方案1】：

你可以试试css方法

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

+ selector

【讨论】：

【解决方案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>

【讨论】：

感谢编辑。我没有注意到这一点。我相信学习，而不是直接使用代码。这就是我提供参考的原因

【解决方案3】：

好像我编辑了 obj.style.height 而不是 .min-height 并且效果很好。

【讨论】：

【解决方案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-->

【讨论】：