0

こんにちは私はcssによると質問があります。

私のナビゲーションバーには3つのリンクがあります。私が使う：

    #p1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #999999;
    text-decoration: none;
}

ユーザーがどのサイトにいるのかを示すステータス。

ユーザーが他の2つのリンクをロールオーバーすると、次のようになります。

    #p2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #ECECEC;
    text-decoration: none;
}
#p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
}
#p2:active {
    font-weight: lighter;
    color: #999999;
}

問題は、ユーザーがp2をホバーしたときにp1から色を変更したいということです。次のような意味：

 #p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
        #p1 {
        color: #f23;
        }
 }

それは可能ですか？

どうもありがとう。

html：

 <div id="nav">
      <div id="link"><p1>link1</p1></div>
      <div id="link"><p2>link2</p2></div>
      <div id="link"><p2>link3</p2></div>
      <div id="link"><div id="login"></div></div>
    </div>
4

1 に答える 1

3

これは純粋なCSSでは実行できません。

できることは、JavaScriptを使用して、＃p2のホバーイベントで＃p1の色を変更することです。

または、より少ないcssを使用して、＃p1の色を変数に設定し、＃p2：hoverでその変数の値を変更することもできますが、この方法は試していません。しかし、やはり少ないcssは純粋なcssではなく、javascriptも使用します。

javascript（jqueryライブラリを使用）を使用すると、コードは次のようになります。

$("#p2").hover(function() {
  $("#p1").css('color', '#f23');
});
于 2012-07-10T08:16:30.153 に答える