2017-06-07 12 views
0

私にはfiddleがあります。フィドルは、1行に2つのテキスト(続きを読む)を持っています。私は、Read Moreテキストをどのように変更することができますか?と思っています。 "Read" = Bold
on hover?このとき1行のホバー

、ホバーなしそれは"Read" = regular"More"=bold italic

である私は、要素をホバリングするために、コードは次のようであることを知っていますか:

p:hover { 
    /* Write code here*/ 
} 

しかし、私はどのように適用するかを確認していません上記のフィドルと同じホバー。

<p class="readmore">READ <strong style="font-style:italic;font-weight:bold">MORE</strong></p>

+1

あなたのフィドルは空です。 –

+0

@PaoloForgia更新しました。 –

+2

'p:hover strong {...}'(これが機能するには、最初にインラインスタイルを削除することをお勧めします) – CBroe

答えて

-1

親クラスに:hoverイベントを追加し、各サブクラスに別のスタイルを設定します。

.readmore:hover .bold { 
 
    font-weight: bold; 
 
} 
 

 
.readmore:hover .italic { 
 
    font-style: italic; 
 
}
<p class="readmore"><span class="bold">READ</span> <span class="italic">MORE</span></p>

1

あなたはspanタグ内の各単語をラップし、ホバー上でそれらをターゲットにnth-childを使用することができます。

.readmore:hover span:nth-child(2){ 
 
    font-style: italic; 
 
} 
 
.readmore:hover span:nth-child(1){ 
 
    font-weight: bold; 
 
}
<p class="readmore"><span>READ</span> <span>MORE</span></p>

https://jsfiddle.net/vmxj2pLs/2/

+2

これは、スタイルが後ろ向きであることを除いて、彼が求めているようです。 – TylerH