11

私はメニューを持っています：

<ul class="menu">
   <li><div class="home"></div> Home</li>
   <li><div class="forum"></div> Forum</li>
   <li><div class="music"></div> Music</li>
</ul>

そしてこのcss：

.menu{
   list-style:none;
   width:100px;
   border:1px solid #ccc;
   padding:0px;
   margin:0px;
}

.menu li{
   height:20px;
   margin-top:5px;
   padding-left:10px;
}

.menu li div{
    display:inline-block;
    width:10px;
    height:10px;
}

.menu li:hover{
   background-color:green;
}

.home{background-color:black;}
.forum{background-color:red;}
.music{background-color:yellow;}

それはすべて素晴らしく機能していますが、ユーザーがリストアイテムにカーソルを合わせると、divが背景を変更し、各divが別のカラーに変更される必要があるため、次のようなものが必要です。

.home li:hover{
   background-color:brown;
}

しかし、今は存在しないdiv内の別のliを選択しようとしています。とにかく、アイデアが得られることを願っています。jsfiddleもここにあります：http：//jsfiddle.net/xShBB/

4

1 に答える 1

25

あなたはほとんどそれを持っていました！

li:hover .home {
   background-color:brown;
}

CSS は常に、セレクターの最も右側にある要素に適用されます (将来、親セレクターのサポートが見られない限り)。したがって、選択した div はセレクターの右側にある必要がありますが、li:hoverその親は左側にある必要があります。

あなたのフィドルが編集されました。

于 2012-09-26T08:00:52.820 に答える