css - CSSホバー疑似クラス単語ごとの単語

Question

CSSで使用する場合

p:hover {background-color: grey;}

段落全体が変更されます。その段落の単語にカーソルを合わせると、その段落の1つの単語を変更したいと思います。どうすればいいですか？

Answer 1

すべての単語を手動でラップしたくない場合は、次のように jQuery を使用してそれを行うことができます。

var p = $('p');
var text = p.text().split(' ');
for( var i = 0, len = text.length; i < len; i=i+1 ) {
    text[i] = '<mark>' + text[i] + '</mark>';
}
p.html(text.join(' '));

次に、次のように CSS を作成します。

p mark:hover {background:yellow}

デモは次のとおりです。http://jsfiddle.net/zL2Yw/1/

残念ながら、純粋な CSS ソリューションはありません。

Answer 2

単語をインライン要素でラップするだけです。

<p>
  Lorem ipsum sit dolor amet <mark>consectetur</mark> dolor ...
</p>

段落がホバーされたときに背景色を変更します

p:hover mark {
   background-color: grey;
}

( の代わりに最適な要素を自由に使用してください<mark>...</mark>)