1

さまざまな方法を試しましたが、役に立ちません。

私は持っている：

<div>
    <a id="" href="">Link 1</a> <a id="2" href="">Link 2</a> <a id="linkid" href="">Link 3</a>
</div>
<div id="dropdown_div" style="display:none;">
   Linkindiv
   Link2indiv
</div>

ユーザーがリンク 3 にカーソルを合わせると、div がその真下に表示され、ページ上の他のものよりも高い z-index で絶対的に配置されます。

お気に入り

Link1 link 2 link3
         [ linkindiv  ]
         [ link2indiv ]

これは、表示と非表示に使用している jquery コードです。

            var hide = false;
            jQuery("#linkid").hover(function(){
                if (hide) clearTimeout(hide);
                jQuery("#dropdown_div").fadeIn();
            }, function() {
                hide = setTimeout(function() {jQuery("#dropdown_div").fadeOut("slow");}, 250);
            });
            jQuery("#dropdown_div").hover(function(){
                if (hide) clearTimeout(hide);
            }, function() {
                hide = setTimeout(function() {jQuery("#dropdown_div").fadeOut("slow");}, 250);
            });
4

2 に答える 2

3

これは、水平ナビゲーション バーを作成しようとしているようです。div の代わりにリストを使ってみましたか?

デモ用に JsFiddle を作成しました: http://jsfiddle.net/g8WUA/

JavaScript は不要で、クロス ブラウザー (およびモバイル) と互換性があります。

一番、

シンシア

于 2012-07-23T00:49:42.157 に答える
0

ここで、上記の問題に対してJavaスクリプトを使用して、ビンで完全なソリューションを実行しました。

デモ: http://codebins.com/bin/4ldqp9z

HTML:

<div id="menu">
  <a id="1" href="#1">
    Link 1
  </a>

  <a id="2" href="#2">
    Link 2
  </a>

  <a id="linkid" href="#3">
    Link 3
  </a>
</div>
<div id="dropdown_div">
  <div>
    <a href="#">
      Linkindiv
    </a>
  </div>
  <div>
    <a href="#">
      Link2indiv
    </a>
  </div>
</div>

CSS:

#menu{
  width:750px;
  border:1px solid #546588;
  padding"5px";
  background:#88f8fd;
}
#menu a{
  display:inline-block;
  padding:5px;
  text-decoration:none;
  width:70px;
  color:#1122ff;
}
#menu a:hover{
  background:#55a899;
  text-decoration:underline;
}
#dropdown_div{
  display:none;
  position:absolute;
  border:1px solid #546588;
  background:#88f8fd;
  width:70px;
}
#dropdown_div a{

  text-decoration:none;
  color:#1122ff;
}
#dropdown_div div:hover{

  background:#55a899;
}
#dropdown_div div:hover a{

  text-decoration:underline;
}

Javascript:

var MenuDiv = document.getElementById('menu');
var menulinks = MenuDiv.getElementsByTagName('a');
var dropdown_div = document.getElementById('dropdown_div');
var i = 0;
//bind mouseover and mouseout event with each link
for (i = 0; i < menulinks.length; i++) {
    menulinks[i].onmouseover = function() {
        var mTop = this.offsetTop + MenuDiv.offsetHeight + 1;
        var mLeft = this.offsetLeft;
        dropdown_div.style.top = mTop;
        dropdown_div.style.left = mLeft;
        dropdown_div.style.display = 'block';

    }
    menulinks[i].onmouseout = function() {
        dropdown_div.style.display = 'none';
    }
}
于 2012-07-23T08:29:32.377 に答える