1

テキスト ブロックに純粋な CSS ホバー効果を作成しようとしています。これはhtml..

<p class="background-switch">Ok, <span style="color:red;">now that</span> you've done that, hover me next!</p>

そしてCSS..

.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}

.background-switch:hover {
background-color: lightblue;
color: white ; 
}

タグなし<span>で正常に動作します<p>..しかし、問題は、ホバリングする前に「今」の色を赤く、ホバリングするときに白くする必要があることです。ホバリング時に赤が白に変わることを拒否するため、これは当てはまりません。クラスプロパティを適用する方法はあり<span>ますか?

4

7 に答える 7

3

あなたが持っているので：

<span style="color:red;">

これは、inline style上書きされていません。

これを修正する最善の方法は、それinline styleを CSSに移動することです。

.background-switch span {color:red;}
.background-switch:hover span {color:#fff;}

または、 を保持したい場合は、CSSinline styleを追加!importantして、ルールがルールをオーバーライドするようにしますinline。

JSFiddleデモ

于 2013-06-21T14:11:37.913 に答える
1

スパンにクラスを追加する

<p class="background-switch">Ok, <span class="random-class">now that</span> you've done that, hover me next!</p>

次に、あなたのcssで：

.background-switch {
    text-align: center;
    padding: 1em;
    max-width: 250px;
    font-size: 2.2em;
    border-radius: 30px;
    background-color: pink;
}

.random-class {
     color:red;
}

.background-switch:hover,
.background-switch:hover .random-class {
    background-color: lightblue;
    color: white ; 
}
于 2013-06-21T14:11:10.940 に答える
0

CSS のセレクターの優先順位が原因で、コードが機能しません。インライン スタイルは他のすべてに勝ります。そう：

<span style="color: red;">他のスタイルを無視します。

スパンにクラスを追加すると、これが修正されます。

<span class="something">

于 2013-06-21T14:11:22.113 に答える
0

Remove the style="color:red;" from your span, and then add the following to your CSS:

.background-switch span {
color:red;
}

.background-switch:hover span {
color:white;
}
于 2013-06-21T14:11:53.317 に答える
0

このようなものを追加すると役立つ場合があります

.background-switch > スパン { color:red; }

.background-switch:hover > span { color:white; }

スタイル inline style="color:red; を削除します。

于 2013-06-21T14:14:04.283 に答える
0 
.background-switch span {color: red;}    
.background-switch:hover span {color: #fff;}

スパンからインライン スタイルを削除する

于 2013-06-21T14:12:13.537 に答える