在外部类上应用悬停，但不在内部 div 上应用悬停

Question

<article class="post blog-post" itemprop="blogPost" itemtype="http://schema.org/BlogPosting" itemscope="itemscope">
<div class="one-third first">
...
</div>
<div class="two-thirds">
...
</div>
</article>

我正在尝试使用以下代码将鼠标悬停在博客文章上时实现边框样式，它将边框悬停在博客文章类中的每个div 上，而不是在博客文章类上

.blog-post :hover {
border: 3px solid rgba(0,0,0,0.1);
}

如何将边框悬停在 .blog-post 类上？

Answer 1

将伪状态直接应用于预期的目标元素：

.blog-post:hover {border: 3px solid rgba(0,0,0,0.1);}

.blog-post:hover {
border: 3px solid rgba(0,0,0,0.1);
}

<article class="post blog-post" itemprop="blogPost" itemtype="http://schema.org/BlogPosting" itemscope="itemscope">
<div class="one-third first">
...
</div>
<div class="two-thirds">
...
</div>
</article>

Answer 2

一种可能性是将文章包装在<div>中，并将悬停属性添加到该div。

Answer 3

试试这个

在 CSS 中使用直接article

article:hover {
border: 3px solid rgba(0, 0, 0, 0.1);
}

<article class="post blog-post" itemprop="blogPost" itemtype="http://schema.org/BlogPosting" itemscope="itemscope">
<div class="one-third first">
...
</div>
<div class="two-thirds">
...
</div>
</article>