Question

我有fiddle。小提琴在一行中有2个文本（阅读更多）。我想知道，如何将Read More文字更改为："Read" = Bold
"More"=Italic悬停？

目前，没有悬停的是"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>

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>

Answer 2

将:hover事件添加到父类，然后为每个子类设置不同的样式。

＆＃13;

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

＆＃13;

<p class="readmore"><span class="bold">READ</span> <span class="italic">MORE</span></p>

＆＃13;