0

使用 jQuery，我将鼠标悬停在一个段落上，让段落更改 BG 颜色并添加一个框阴影，很简单。然而，我想补充的是，当段落的 BG 颜色发生变化时（悬停时），<strong>只有该段落中的任何标签都会更改其 CSS 以增加重点。换句话说，默认的 CSS<strong>是关闭的（没有粗体）：

CSS：

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

当同一段落悬停时，我只希望该段落的strongCSS 更改为：

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 更改只影响一个段落。感谢所有帮助，感谢阅读。

4

4 回答 4

2

我不明白你为什么要为此使用 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 反映这一点。

<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;
}
于 2013-03-08T13:36:17.023 回答
1

您的解决方案：而不是$(this).css('background-color', '')使用$(this).find('strong').css('background-color', '').

一个提示：

使用类而不是直接使用带有 .addClass() 和 .removeClass() 的“css”的样式也更好。

p.bullets strong.hover
{
    background-color: rgba(255,255,255,1);
}

然后使用它.hover：

$(this).find('strong').addClass('hover');

与 removeClass() 相同。

于 2013-03-08T13:32:16.527 回答
0

您可以添加一个新的 css 规则来捕获您已经设置到段落的样式中的强标签（假设您只在此处使用它），否则也添加另一个类。前任。：

p.bullets.boxShadow strong {
   /* your desired tag appearance */
   font-weight: 800;
}
于 2013-03-08T13:37:01.960 回答
0

如果您只想选择当前段落中的元素，请在选择器中添加上下文参数。

将此添加到悬停功能：

$("strong",this).css('font-weight','800')

这对于悬停功能：

$("strong",this).css('font-weight','')
于 2013-03-08T13:42:07.777 回答