css - 单行悬停

Question

我有一个 fiddle . fiddle 在一行中有 2 个文本(阅读更多)。我想知道，如何将 Read More 文本更改为: "Read"= 粗体
"More"=Italic 悬停时？。

此刻，没有悬停它是 "Read"= regular "More"=bold italic

我知道要悬停一个元素，代码应该是这样的:

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

但我不确定如何将相同的悬停应用于上面的 fiddle 。

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

Answer 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/