1

マウスが別の div の上に置かれているときに、詳細な情報を含む div をドロップダウンしたいのですが、これをどのように整理すればよいかわかりません。私は次のものを持っています: http://quaaoutlodge.com/drupal-7.14/そして、[今すぐ予約] 領域にカーソルを合わせると、カーソルが [今すぐ予約] または [TEST] の上にある限り、TEST-div がドロップダウンするようにしたいと思います。カーソルが領域を離れるとすぐに再びドロップするはずです。これについてはどうすればよいですか？

http://www.thedana.com/で見られるものに似たものを得るために、book now div にカーソルを合わせたときに実行される onmouseover javascript コードを実装しようとしました。次のように、最初に要素の高さを静的に変更しようとします。

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

    } else {
    }
  }

しかし、私はそれを手に入れることができません。最終的な目標は、少し遅れてループを作成し、今すぐ予約タブをゆっくりとドロップダウンすることです。

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

代わりに 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 に答える
0

.min-height の代わりに obj.style.height を編集したようで、正常に動作します。

于 2012-10-03T15:25:31.800 に答える