0

だから私はこれが可能かどうか疑問に思っていました。

ナビを作っています。

<nav id="navigation">
  <div class="nav_buttons"><a href="/">home</a></div>
  <div class="nav_buttons"><a href="/system/">system</a></div>
  <div class="nav_buttons"><a href="/studies/">studies</a></div>
  <div class="nav_buttons"><a href="/approach/">approach</a></div>
  <div class="nav_buttons"><a href="/about/">about</a></div>
  <div class="nav_buttons"><a href="/contact/">contact</a></div>
</nav>

しかし、私が望むのは、それらの1つにカーソルを合わせると、divの境界線と < a > タグのテキストの色の両方が同時に変化することです

私はこれを試しました

   #navigation {
     text-align: center;
     height: 150px;
     padding-top: 100px;

    }
  .nav_buttons {    
    display: inline; 
    height: 40px;
    width: 100px;
    border-bottom: 1px solid black;
    margin-left: 20px;
    }
  #navigation a{
    margin-right: 50px;
    font-size: 20px;
    text-decoration: none;
    color: black;
    }


  div.nav_buttons:hover {
    border-bottom: 1px solid #ff3300;

  }
  div.nav_buttons:hover a{
    color:#ff3300;
  }

しかし、それは国境を変えただけです。私は JavaScript を使用したいと思っていますが、子要素の購入を親の上に置くと変更できることがわかりました。

div#parent_element:hover div.chil_element {color: red;}

CSSで単純にそれを行う提案は壮大でしょうか??

4

2 に答える 2

2

#navigation aセレクターでスタイルを割り当てたので、(以前の) ルールの特異性の問題に依存します。だからこれを試してください

#navigation > div:hover a {
    color:#ff3300;
}

または単純に試してください!important 

div.nav_buttons:hover a {
    color:#ff3300 !important;
}

補足として、マークアップ内のすべての div にクラス名を繰り返し使用することを避け、代わり#navigation > divにそれらの要素を参照するために使用することもできます。

于 2013-01-23T09:19:07.387 に答える
1

あなたのコードは問題ありません。しかし、いくつかの既存のスタイルが現在のスタイルを上書きしていると思います。したがって、目的の結果を得るには、以下のような相対的なスタイリング手法を使用することをお勧めします。

  #navigation div.nav_buttons:hover {
    border-bottom: 1px solid #ff3300;

  }

  #navigation div.nav_buttons:hover a{
    color:#ff3300;
  }

デモを見る

于 2013-01-23T09:24:14.270 に答える