1

当鼠标悬停在另一个 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 选项卡。

4

4 回答 4

3

您可以尝试使用 css 方法

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

+ 选择器

于 2012-10-03T04:40:11.603 回答
1

您可以使用此代码或（参考：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>
于 2012-10-03T04:41:44.890 回答
0

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

于 2012-10-03T15:25:31.800 回答
0

改为使用 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-->
于 2012-10-11T15:06:43.313 回答