ホバーのターゲットテキストの色

Question

私はcssボタンを作ったが、ボタンの上にマウスを置くと、テキストの色を白に変更する方法がわからない。

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 

 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

私はそれが動作しません

a.button1o:hover 

に色を追加します。

私も試してみました：

• a.button1oテキスト：あなたは親要素に:hoverセレクタを使用することができます

Answer 1

ないspanは私がa.button1o:hoverにcolor:#fffを追加上記のスニペットでは、この

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    color: #f44336; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

を試してみても、私は#f44336を追加しました〜.button1o

もう一つの方法は、あなたが2つのオプションがあり、この

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
} 
 
a.button1o:hover { 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
a.button1o:hover span { 
 
    transition: all 0.9s ease 0.1s; 
 
    color: #fff; 
 
} 
 
.button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
}

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
</a>

Answer 2

を置く：

a.button1o:hover .button1o-text { 
    color: white; 
} 

また、あなたが入れなければなりませんtransitionプロパティを最初の宣言内に挿入します。そうしないと、ユーザーがボタンの上にマウスを置いたときに遷移が失われます。あなたはaに色を適用しているためである

は

.button1o { 
    background-color: transparent; 
    padding: 10px 15px; 
    margin-right: 15px; 
    border: 2px solid #f44336; 
    border-radius: 2px; 
    transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover { 
    background-color: #f44336; 
} 
a.button1o:hover .button1o-text { 
    color: white; 
} 

.button1o-text { 
    font-size: .7em; 
    font-family: 'PT Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    color: #f44336; 
} 

Answer 3

のようなものです。より洗練されたオプションは、color: #f44336ルールを.button1o-textから.button1oに移動することです。これにより、現在のホバールールによって色が上書きされます。 （？あなたはすべての個別のCSSルールとスパンを持っている理由がある）

他のオプションは、テキストを着色するこのホバールールを追加することです：

.button1o:hover .button1o-text { 
    color: [hover color]; 
} 

Answer 4

あなたがホバープロパティを追加する必要がありますスパン要素。それは、次のとおりです。

ここ

a.button1o>span:hover { 
    color:white; 
} 

が質問からあなたの作業コード

.button1o { 
 
    background-color: transparent; 
 
    padding: 10px 15px; 
 
    margin-right: 15px; 
 
    border: 2px solid #f44336; 
 
    border-radius: 2px; 
 
    } 
 

 
    a.button1o:hover { 
 
     color:white; 
 
    background-color: #f44336; 
 
    transition: all 0.9s ease 0.1s; 
 
    } 
 
a.button1o>span:hover { 
 
     color:white; 
 
    } 
 
    .button1o-text { 
 
    font-size: .7em; 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0; 
 
    color: #f44336; 
 
    }

<a class="button1o" href="" target="_blank"> 
 
    <span class="button1o-text">Flat button</span> 
 
    </a>

Answer 5

チェックこのfiddleです。

CODE

これは、あなたが望んでいたとして働くそれがないなら、私に教えて、あなたに感謝すべきです。 a.button1oに白：

a.button1o:hover{ 
background-color: #f44336; 
transition: all 0.9s ease 0.1s; 
} 

a.button1o:hover .button1o-text{ 
color: #fff; 
transition: all 0.9s ease 0.1s; 
} 

Answer 6

あなたは は、単にbutton1oクラスに設定を統合し、色を追加...スパンクラス= "button1oテキストを必要としない。ホバークラス

<a class="button1o" href="" target="_blank">Flat button</a> 

あなたは、テキストの装飾を追加する必要があるかもしれません

：どれもあまりにもbutton1oのdefintionsに属性ん

Answer 7

あなたが.button1oクラスにホバーを入れているが、.button1oテキストこのクラスは、この色.button1oオーバーライドしている誤ってホバーに置く

。

コードをこのようにしてください。

.button1o { 
background-color: transparent; 
padding: 10px 15px; 
margin-right: 15px; 
border: 2px solid #f44336; 
border-radius: 2px; 
} 
.button1o-text { 
font-size: .7em; 
font-family: 'PT Sans', sans-serif; 
font-weight: 700; 
text-transform: uppercase; 
letter-spacing: 0; 
color: #f44336; 
} 
a.button1o:hover { 
background-color: #f44336; 
} 
span.button1o-text:hover { 
transition: all 0.9s ease 0.1s; 
color:#fff; 
}