0

ホバー時にマルチホバーを作成できない方法を考えていました。たとえば、#a がホバーされたときに #b の色を変更するにはどうすればよいですか? html と css のみを使用します。ちなみに #a はボックスまたは画像です

HTMLは次のとおりです。

<div id="showwrap">
    <div id="leftbox">
        <ul>
            <li id="a"> <a href=""></a></li>
        </ul>
    </div>
    <div id="rightbox">
        <ul>
            <li id="b"> <a href="">Firstname Lastname</a></li>
        </ul>
    </div>
</div>
4

2 に答える 2

1

トニー、

この件に関して数日前に投稿した他の投稿に対する同じ回答は同じままです (リストで複数のホバーを実行する方法)。純粋な CSS の回答が 1 つあったように見えますが、jQuery オプションははるかに単純です。

jQuery や JavaScript を使用したくない/使用できない理由はありますか? そのような状況が、JavaScript が使用される理由の 1 つです。誰かがこれを行うための純粋な CSS / HTML の方法を持っているかどうかを聞くために、私はこれに注目します。当面は、次の方法で jQuery または JavaScript を使用してこれを実現できます。

1.) #a の上にカーソルを置いたときに必要なプロパティを持つ CSS クラスを作成します。

2.) 関連する JavaScript ファイル (または HTML ドキュメントの先頭) に次の jQuery コードを含めます。

$(function() {
    $("#a").hover(function() {
        $(this).addClass("hoverClass");
        $("#b").addClass("hoverClass"); 
    });
});

jQuery の hover 関数は、MouseEnter 関数と MouseOut 関数の両方を 1 ステップで解決します。マウスが指定された要素の上にある間、関数内の条件に従います。マウスが要素から離れると、条件は自動的に削除されます。プレスト！

注: インライン JavaScript の使用はお勧めしませんが、jQuery を使用しない理由が外部 JavaScript ファイルを使用できないことが原因である場合は、HTML ファイルでこれを行うことができます。ヘッダーの JavaScript スクリプト タグの間に、2 番目のポイントに記載されているスニペットを含めるだけです。

于 2013-09-30T20:59:10.213 に答える