web-dev-qa-db-ja.com

クラスに基づいてa：hoverを設定します

次のHTMLがあります。

<div class="menu">
    <a class="main-nav-item" href="home">home</a>
    <a class="main-nav-item-current" href="business">business</a>
    <a class="main-nav-item" href="about-me">about me</a>
</div>

CSSでは、これらのメニュー項目のa:hoverを特定の色に設定します。だから私は書く：

.menu a:hover
{
    color:#DDD;
}

ただし、このa:hover色は、クラスmain-nav-itemではなく<a>タグに対してのみ設定し、main-nav-item-current。これは色が異なり、ホバー時に変化しないためです。 menudiv内のすべての<a>タグは、currentクラスを持つタグを除き、ホバー時に色を変更する必要があります。

CSSを使用してどうすればよいですか？

私は次のようなものを試しました

.menu a:hover .main-nav-item
{
    color:#DDD;
}

main-nav-itemクラスを持つもののみがホバー時に色を変更し、現在のものは変更しないと考えています。しかし、それは機能していません。

htmlcsscolorshoveranchor
48
anon355079

これを試して：

.menu a.main-nav-item:hover { }

これがどのように機能するかを理解するためには、ブラウザのようにこれを読むことが重要です。 aは要素を定義し、.main-nav-item修飾はそのクラスを持つもののみに要素を定義し、最後に擬似クラス:hoverが適用されます前に来る修飾表現。

基本的に、これは次のように要約されます。

このホバールールを、クラスmenuを持つ要素の子孫であるクラスmain-nav-itemを持つすべてのアンカー要素に適用します。

94
Andrew Hare

カスケードはあなたを噛んでいます。これを試して：

.menu > .main-nav-item:hover
    {
        color:#DDD;
    }

このコードは、main-nav-itemのクラスを持ち、かつクラスメニューの子であるすべてのリンクを取得し、ホバーされたときに色#DDDを適用することを示しています。

9
Scott Radcliff

クラスに基づいてa：hoverを設定すると、簡単に試すことができます：

a.main-nav-item:hover { }
3
Rizo

これを試して

.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}

.div a:hover
{
background-color:#080808;
color:white;
}

コードで使用されるアンカータグがあり、メインプログラムでクラス「div」が呼び出されるとします。 a：hoverが機能し、マウスを上に移動すると、背景に黒の吸血鬼を、テキストに白の色を与えます。これがホバーの意味です。

2
KNiF3

1つの一般的なエラーは、クラス名の前にスペースを残すことです。これが正しい構文であったとしても：

.menu a:hover .main-nav-item

うまくいきませんでした。

したがって、あなたは書きません

.menu a .main-nav-item:hover

それはそのようになります

.menu a.main-nav-item:hover
0
DanDan

.main-nav-item:hover

これは特異性を低く保ちます

0
Aleksej Dix