javascript - 在外部类上应用悬停，但不在内部 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>

我正在尝试使用以下代码在 blog-post 上悬停时实现边框样式，它将悬停在 blog-post 类中的每个 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>