悬停时的 CSS 样式子类

Question

我正在尝试使用父类的 on hover 设置子类的样式。

这是我想要的和我尝试过的：

所以使用图像进行解释，当我将鼠标悬停在红色箭头处的部分 div 上时，我希望红色 div 内的文本变为红色，而 div 的背景变为白色（在黄色箭头处）。

这是我在代码中尝试过的：

/* CSS */
.blogpost_preview_fw:hover > .bc_title a:active {
   color: red;
   background-color: white;
}

/* HTML */
    <div class="blogpost_preview_fw element places streets">
        <div class="fw-portPreview">
            <div class="img_block wrapped_img fs_port_item">
                <a class="featured_ico_link" href="portfolio_post_fullscreen_slider.html" >
                    <img alt="" src="img/portfolio/540_auto/10.jpg" />
                </a>
                <div class="bottom_box bottom_box_v2">
                    <div class="bc_content bc_content_v2">
                        <h5 class="bc_title"><a href="verhaal.php">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, quaerat!</a></h5>
                    </div><a href="verhaal.php">
                        <div class="bc_likes gallery_likes_add already_liked">
                            <i class="stand_icon icon-comment-o"></i>
                            <span>Verhaal</span>
                        </div></a>
                </div>
                <div class="portFadder"></div>
            </div>
        </div>
    </div>

那么这在纯 CSS 中是否可行，还是我必须使用 jQuery 在 HTML 标签上放置类？

我正在使用 HTML、CSS、Bootstrap v3.3.7

Answer 1

您在这里唯一的错误是使用 :active 伪选择器（锚元素不一定处于活动状态，除非您通过 JS 强制它进入活动状态？）和直接子 (>) 选择器。 .bc_title 不是 .blogpost_preview_fw 的直接子代；)

.blogpost_preview_fw:hover .bc_title a {
   color: red;
   background-color: white;
}

要添加另一个选择器，请这样做：

.blogpost_preview_fw:hover .bc_title a,
.blogpost_preview_fw:hover .bc_likes {
    color: red;
    background-color: white;

}

Answer 2

您使用了错误的 CSS 选择器。 '>' 表示 .blogpost_preview_fw 的第一级子级，其中 .blogpost_preview_fw 只有一个子级（ .fw-portPreview ），因此无法找到。

这个应该做的事情：

.blogpost_preview_fw:hover .bc_title a:active {
   color: red;
   background-color: white;
}

还可以考虑删除 :active 伪类。使用该伪类，锚元素只有在被点击时才会获得样式。

Answer 3

请试试这个：

.blogpost_preview_fw:hover .bc_title a {
   color: red;
   background-color: white;
}