1

アイコンとそれに続くページのタイトルで構成されるナビゲーション バーを作成しています (たとえば、ホームのアイコンの後に「ホーム」というテキストが続きます)。:hover セレクターを使用して、テキストまたはアイコン自体にカーソルを合わせたときに、アイコンのみ (!) の色を黒 (デフォルト) から青に変更したいとします。どうやってやるの？(jQuery は使いたくありません。CSS だけです) マークアップは次のようになります。

<ul id="navbar">
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-home"></i></li>
        <li class="navname">Home</li>
    </ul>
</li>
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-info"></i></li>
        <li class="navname">Information</li>
    </ul>
</li>
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-contact"></i></li>
        <li class="navname">Contact</li>
    </ul>
</li>
</ul>

もちろん全ては{display:inline}

4

4 に答える 4

1

次の css を使用する必要があります。

.navgroup:hover .navicon {
    background-color: blue;
}

navgroup内のどこかにカーソルを合わせると、いつでもnaviconだけが変更されます

このjsFiddleを参照してください

于 2013-08-01T12:45:07.243 に答える
1

要するに、カーソルがul要素の上にあるときにアイコンの外観を変更することになるため、次のようにすることができます。

.navgroup ul:hover .navIcon .icon-home
{
  /*hover style for the icon*/
}

.navgroup ul .navIcon .icon-home
{
  /*non-hover style for the icon*/
}
于 2013-08-01T12:21:48.287 に答える
0

アンカータグを使用する必要があります

CSS:

.testing:hover {
    color: red;
}

html:

<a class="testing" href="">
    <span>hello1</span>
    <span style="color:black;">hell2</span>
</a>

タグにスタイル全体を与え、変更したくないタグ<a>内の他の要素にインラインスタイルを与えます。<a>

于 2013-08-01T12:31:37.817 に答える