jQuery，CSS 在 HOVER 段落内更改标签

Question

使用 jQuery，我将鼠标悬停在一个段落上，让该段落更改 BG 颜色并添加一个框阴影，非常简单。但是，我想补充的是，当段落的 BG 颜色发生变化(悬停时)时，任何 <strong>仅该段落中的标签会更改其 CSS 以增加强调。换句话说，<strong> 的默认 CSS关闭(无粗体):

CSS:

p.bullets strong
{
    font-weight: 100;
}

当同一段落悬停时，我希望只有该段落的 strong CSS 更改为:

p.bullets strong
{
    font-weight: 800;
}

jQ改变BG颜色，添加阴影:

  $("p.bullets").hover(
    function() {
      $(this).css('background-color', 'rgba(255,255,255,1)')
  $(this).addClass('round_right boxShadow')
    }, function() {
      $(this).css('background-color', '')
       $(this).removeClass('boxShadow')
    });

HTML:

<p>We show parents and professionals <strong>dealing head-on</strong> with the issues that impact etc.</p>   

---

我遇到的问题是让 CSS 更改只影响一个段落。感谢所有帮助，感谢阅读。

Answer 1

我不明白你为什么要为此使用 jQuery。

在 P 悬停时更改背景

p.bullets:hover {
   background: #000;
   box-shadow:0 3px 5px rgba(0,0,0,0.1);
}

然后更改强标签:

p.bullets:hover strong {
  font-weight: bold;
  color: #fff;
}

只是一个例子。为了支持旧浏览器，您可以将 p 包装在 a 中并更改 css 以反射(reflect)这一点。

<a href="javascript:void(0)">
  <p class="bullets">Some text <strong> more text </strong> </p>
</a>

a:hover p.bullets {
   background: #000;
   box-shadow:0 3px 5px rgba(0,0,0,0.1);
}

a:hover p.bullets strong {
  font-weight: bold;
  color: #fff;
}