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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

将hover应用于外部类但不应用于内部div

3 个答案: