0

この質問を見たことがありますが、自分のメニューに答えを適用できないようです。私のサッカーフィッシュメニューは基本的にこれです（http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html）テーブル。選択したオプション間を移動するときに、行ったすべてのオプションが強調表示されたままになり、現在の場所に到達するためにどのオプションを選択したかがわかるようにするにはどうすればよいですか? #nav、this、#nav、that など、付属のすべてのスタイルを試行錯誤しましたが、ネストされた 1 つのリスト項目の以前のすべてのメニューを一度に参照しているようには見えません。

私はこれを自分自身に教えてきたので、質問でできるだけ明確にしようとしました。うまくいけば、私は理にかなっています!!!

どうもありがとうございます！

4

2 に答える 2

1

上記は Firefox では正常に機能しますが、IE では継承を尊重しないため、IE では機能しません。これにより、マウスを LI タグの別の部分に移動したときに、リンクの色がそのホバー カラーのままにならなくなります。

以下のコードはきれいではありませんが、機能します。

HTML

<ul id="nav">
 <li ><a href="test.org" class="navlink">Test</a>
             <ul>
         <li ><a href="test2.org">Test2</a></li>
                <li ><a href="test2.org">Test2</a></li>
             </ul>
        </li>
 <li ><a href="test.org" class="navlink">Bonk</a>
             <ul>
         <li ><a href="test2.org">Bonk2</a></li>
                <li ><a href="test2.org">Bonk2</a></li>
             </ul>
        </li>
</ul>

Javascript

sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   var els = this.getElementsByTagName("A");
   for (var j=0; j<els.length; j++) {
    if(els[j].className =="navlink") els[j].style.color = '#FFFFFF';
   }
   this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
   var els = this.getElementsByTagName("A");
   for (var j=0; j<els.length; j++) {
    if(els[j].className =="navlink") els[j].style.color = 'Red';
   }
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
于 2010-01-12T21:31:48.610 に答える
1

色のスタイルを <a> タグから <li> タグに移動する必要があります。

#nav li { /* all list items */
    ...
    background-color : white;
    color : black;
}
#nav li:hover,
li.sfhover{
    color : white;
    background-color : black;
    }

また、親から色を取得するように <a> を設定します。

#nav li a {
    color:inherit;
}

ここでこれらの変更を加えたバージョンの例を参照してください: http://demo.raleighbuckner.com/so/1347579/

この変更の理由は、ナビゲーションの 2 番目と 3 番目のレベルが <a> タグではなく <li> タグの子であるためです。そのため、サブリストにカーソルを合わせると、もはや <a> の上にカーソルを置いているわけではなく、色は適用されなくなります。

配色スタイルを <li> まで移動すると、ホバーを引き続き有効にできます。

于 2009-08-28T20:29:12.280 に答える