CSS style childclass on hover

Question

I am trying to style an child class using the on hover of the parent class.

Here is what I want and what I tried:

So explanation using the image, when I hover over partent div at the red arrow I want the text inside of the red div do turn red and the background of the div white ( At the yellow arrow ).

Here is what I tried in code:

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

So is this possible in pure CSS or do I have to put classes on the HTML tags using jQuery?

I am using HTML, CSS, Bootstrap v3.3.7

Answer 1

Your only mistake here is using the :active pseudo selector (anchor element is not necessarily in active state, unless you force it to active state via JS?) and the direct child (>) selector. .bc_title is not a direct child of .blogpost_preview_fw ;)

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

To add another selector do it like this:

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

}

Answer 2

You've got the a wrong CSS Selector. '>' means the first-level child of .blogpost_preview_fw, which .blogpost_preview_fw has only one child ( .fw-portPreview ), thus it cannot find it.

This one should do the thing:

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

Also consider removing the :active pseudo-class. With that pseudo-class, the anchor element will get the style only when it has been clicked.

Answer 3

Please try this:

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