css - CSS: On Hover - 如何更改选择器子项的 css 属性？

Question

我有这些较小的横幅，我想在其中更改“A”标签内的一些样式属性。

<a href="#">
   <h2>Heading</h2>
   <p class="service-sub">Some Text</p>
   <img src="path" />
</a>

我想要做的是改变 p.service-hub 中的样式。以下是我尝试过的两种方法，但无济于事...

Method 1: a .service-hub *:hover
Method 2: a .service-hub:hover

这甚至可能吗？因为悬停事件首先使用 A 标签触发，所以它甚至会识别 p.service-hub 上的悬停吗？

Answer 1

你试过这个吗？

a:hover .service-sub

Answer 2

锚标记获取悬停伪类，而不是<P>.

a:hover .service-hub

Answer 3

您还可以用户a:hover *选择所有<a>孩子

Answer 4

您可以在指定的情况下使用以下内容 -

a:hover p// In case You want to apply some style on all the <p>-tag which are either immediate child or successors of an <a>-tag.
{...}

或者

a:hover p.service-sub// In case You want to apply some style on all the <p>-tag with class-"service-sub" which are either immediate child or successors of an <a>-tag.
{...}

或者

a:hover .service-sub// In case You want to apply some style on all the elements with class-"service-sub" which are either immediate child or successors of an <a>-tag.
{}

对于您想做的事情，请使用它-

a:hover>p.service-sub// In case You want to apply some style on all the <p>-tag with class-"service-sub" which are  child elements of an <a>-tag.
{...}