2

<li>要素がホバーされたときにリンクのテキストの色を変更したい。今、私は持っています

#nav li a:hover {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

#nav ul li:hover {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

ただし、これはリンク自体がホバーされたときにのみテキストの色を変更します。マウスがリンクの少し右にある場合、背景は変わりますが、テキストは変わりません。リンクの右側にあるマウスが、リンク自体にあるのと機能的に同じになるようにしたいと思います。背景が変わるときにテキストの色を変える方法はありますか?

4

4 に答える 4

19

次にa、 が親から色を継承していることを確認します。

li:hover a {
    color: inherit;
}

aまたは、要素に同じ色を明示的に適用するセレクターを指定します。

#nav ul li:hover,
#nav ul li:hover a {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

もちろん、以下を使用して要素をa塗りつぶすこともできます。li

#nav ul li a {
    display: block;
}

の高さを指定する場合はli、同じ高さを (前のdisplay: blockルールで) 使用すると、aは垂直方向の中央にも配置liされます。次に例を示します。

#nav ul li {
    height: 2em; /* or whatever, adjust to taste... */
}
#nav ul li a {
    display: block;
    line-height: 2em;
}

paddingの はli指定された高さ (要素の高さとパディングと境界線の幅を足したもの) には含まれませんが、a(対応ブラウザーの場合)とを指定した高さbox-sizing: border-box;に含めます。borderpadding

于 2013-06-25T18:47:11.663 に答える
5

簡単！

#nav li a {
  color: white;
}

/* When hovering over li, apply styles to child a */
#nav li:hover a {
  color: blue;
}
于 2013-06-25T18:48:26.693 に答える
0

このようなことを試してください

 #nav li a 
{
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;

}

子 a にスタイルを適用する

#nav li:hover a 
{
 margin-left: -10px;
 padding-left: 10px;
 background-color: #13118C; 
 font-weight: bold;
 width: 100%;
 color: blue;
 }
于 2013-06-25T19:06:52.267 に答える