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以反映此内容。

<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;
}

Answer 2

您的解决方案：而不是$(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（）相同。

Answer 3

你可以添加一个新的css规则来捕获你已经设置到段落的样式中的强标记（假设你只在这里使用它），否则也添加另一个类。例：

p.bullets.boxShadow strong {
   /* your desired tag appearance */
   font-weight: 800;
}

Answer 4

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

将此添加到on-hover功能：

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

这对于悬停功能：

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

jQuery，CSS更改了HOVER段落内的标签

4 个答案: