懸停時的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;
}