0

私は html と css に本当に慣れていないので、チュートリアルを進めながらプロジェクトを作成すると、多くのことを学びながらモチベーションを維持するのに役立つと思いました。

私はこのメニューをいじっていましたが、それはほとんどそこにあります - しかし今、この壁があるようで、それを乗り越える方法がわかりません! 私はいくつかのサイトで何時間も検索しましたが、今ではこのことを窓の外に捨てる準備ができています...

ここにjsfiddleがあります：http://jsfiddle.net/64Grv/

だから私が達成したかったのは、1つのサブメニューにカーソルを合わせると、メニュー全体の色が変わることです（ホバーされたリンクではなく）。たとえば、「その他のもの」にカーソルを合わせると、「menupoint2、もの、その他のもの、さらに多くのもの....」のすべての色が変わるはずです。

どうすればいいですか？私は無駄に別のクラスを入れようとしました - 私はそれらを間違った場所に置いたと思います。または、これはある種のボックスで可能ですか？

私のcssの乱雑さをお詫びします（初心者がいじっているだけです..）。これを行う方法について誰かが具体的なヒントを持っていれば、本当に感謝しています:)

どうもありがとうございます！

CSS:

#navigation ul
{
   margin:0px; 
   padding:0px;
   position:relative;
   text-align:center;
}
#navigation ul li
{
   display:inline; 
   float:right; 
   line-height:20px;
   list-style:none; 
   margin-right:3%;
   margin-top:5%;
   position:relative; 
}
#navigation li a
{ 
   display:block;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size:1em;
   color:#04B4AE; 
   text-decoration:none;
}
#navigation li a:hover
{  
   color:#08298A;
   text-decoration:none;
}
#navigation li ul
{ 
   font-size:0.8em;
   background-color:transparent;
   display:block;  
   margin:0px; 
   padding:0px;
   top:0.5em; 
}
#navigation li:hover ul
{   
   color:#04B4AE;
}
#navigation li li
{
   vertical-align:middle;
   list-style:none; 
   display:list-item;
   margin:auto;
   float:none;
}
#navigation li li a
{
   color:#04B4AE; 
   text-decoration:none;
}
#navigation li li a:hover
{ 
   color:#08298A;
   text-decoration:none;
}
4

3 に答える 3

1

試す

li:hover a 
{
    color:yellow;
}
于 2013-07-09T09:27:58.853 に答える
0

更新されたフィドルのリンクはここにあり、以下に変更されています

以下のコードを置き換えます

#navigation li a:hover
    color:#08298A;
    text-decoration:none;
}

と

#navigation li:hover a {  
    color:#08298A;
    text-decoration:none;
}
于 2013-07-09T09:52:49.007 に答える