Question

当鼠标悬停在另一个div上时，我想下载一个有更多信息的div，我不确定我应该如何组织它。我有以下内容：http://quaaoutlodge.com/drupal-7.14/我希望如果一个人在“立即预订”区域上空盘旋，只要光标超过“立即预订”或“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;
}

+ selector

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

将鼠标悬停在div上

4 个答案: