0

私が抱えている2つの問題。

  1. マウスオーバー機能は非常に高速で、正しく機能していません。オンマウスアウト状態用に別の関数を作成しましたが、役に立ちませんでした。
  2. クラスは適切に変更されますが、変更されたままで、元のクラスに戻りません。リンクが選択したページにあるかどうかによって異なります。どんな助けでも大歓迎です

JAVASCRIPT：

function changeRollover(rollover) {
    var rollItems = document.getElementById(rollover);
    var rollLinks = rollItems.getElementsByTagName('a');
    var noOfLinks = rollLinks.length;
    for (var r = 0; r < noOfLinks; r++) {
        var normalText = rollLinks[r].innerHTML;
        var rolloverText = rollLinks[r].title;
        var rolloverItem = document.getElementById(rollover);
        rolloverItem.innerHTML = "<a href='#' title='" + normalText + "'>" + rolloverText + "</a>";
        rolloverItem.class = rollover + "rollover";    
    }
}

HTML：

<div class="nav">
    <ul id="NavItems">
        <li id="item0" class="selected"  onClick="changeClass(this.id)" 
                       onmouseover="changeRollover(this.id)">
            <a href="#" title="Shop Trends">Collections</a>
        </li>
        <li id="item1" onClick="changeClass(this.id)" 
                       onmouseover="changeRollover(this.id)">
            <a href="#" title="Shop Everything" >All Jewlery</a>
        </li>
        <li id="item2" onmouseover="changeRollover(this.id)" 
                       onClick="changeClass(this.id)">
            <a href="#" title="Shop Press">As Seen On</a>
        </li>
        <li id="item3" onmouseover="changeRollover(this.id)" 
                       onClick="changeClass(this.id)">
            <a href="#" title="fashion + shop">Collaborations</a>
        </li>
        <li id="item4" onmouseover="changeRollover(this.id)" 
                       onClick="changeClass(this.id)">
            <a href="#" title="Shop Designer">Designer Pop Ups</a>
        </li>
    </ul>
    <div class="shipping">
        <a href="#">start your free orders today<br>
        *** click here for more information ***</a>
    </div>
</div>
<!-- .nav -->
4

3 に答える 3

2

必要な効果（使いやすさの観点からは疑わしいですが、それは別として）は、いくつかの単純なCSSを使用してよりよく達成されます。

#NavItems .hover {
  display: none;
}
#NavItems:hover .hover {
  display: inline;
}
#NavItems:hover .normal {
  display: none;
}

これには、次のようなマークアップが必要です。

<ul id="NavItems">
  <li id="item0">
    <a href="#">
      <span class="normal">Collections</span><span class="hover">Shop Trends</span>
    </a>
  </li>
</ul>
于 2013-01-15T21:40:05.137 に答える
0

ブラウザの互換性要件に応じて、関数のトリガーとして代わりにonmouseenterを使用することをお勧めします。

DOMイベント-ブラウザの互換性

しかし、1つには、クラスをリセットできるonmouseout関数がありません。クラスを要素にアタッチしたら、ユーザーの操作に応じてクラスを削除する場合は、手動で削除する必要があります。したがって、以下のようなresetRollover関数のようなものを作成し、その関数を起動するonmouseoutDOMリスナーをアタッチします。

function resetRollover(rollover) {
  var className = document.getElementById(rollover).className;

  document.getElementById(rollover).className = className.substring(0, indexOf(' rollover'));
}
于 2013-01-15T21:35:04.050 に答える
0

問題は、onmouseoverハンドラーがにあることliです。マウスがの<a>sにカーソルを合わせると、の<li>「再入」onmouseoverが<li>再度トリガーされます。

ここの例：これはあなたのものと同じコードです、私はいくつかの色を追加しました。黒い部分（）だけでマウスを動かすと、<li>必要に応じてロールオーバーが発生します。ただし、緑色の部分（<a>s）でマウスを動かすと。

解決策として、のロールオーバーを処理するか<a>、基本設計を変更することができます（@Thomasの回答を参照）

于 2013-01-15T21:43:05.670 に答える