Control child div css using parent div class

Question

I have a rectangular box that can call modal when clicked. Inside the box are labels and an expand icon.

<div class="clickable-box" ng-click="openRetailerGraphDetails()" data-toggle="modal" data-target="#g-retailer-purchases-graph">
        <div class="dashboardBox clearfix">
              <div class="pull-left dashboardBoxLabel purchases">
                   <h4 class="dashboardBoxLabeltext">
                          {{RetailerPurchases}} RETAILER PURCHASES
                    </h4>
                    <span class="dashboardBoxLabel2">
                           For the current month
                    </span>
              </div>
              <img class="pull-right expand-icon" src="themes/img/dashboard/expand.svg" />
         </div>
      </div>

I want to change the opacity of the expand icon inside img tag from 0 to 0.7 when the whole clickable box is hovered. How can I achieve it?

Edit: Here`s the css

.clickable-box {
    cursor: pointer;
 }

 #dashboard .expand-icon {
    width: 20px;
    margin-top: 13px;
    margin-right: -10px;
    margin-bottom: -25px;
    opacity: 0;
  }

Dekel · Accepted Answer · 2017-03-23 00:58:19Z

1

You can use the :hover pseudo class:

#dashboard .clickable-box:hover img.expand-icon {
    opacity: 0.7;
}

edited Mar 23, 2017 at 0:58

answered Mar 23, 2017 at 0:40

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JkAlombro Over a year ago

Not working for me. I added more details to the question it might help you improve this answer.

chris cozzens Over a year ago

where are you getting dashboard id from?

Dekel Over a year ago

@chriscozzens the updated question, it's in the CSS there.

JkAlombro Over a year ago

@chriscozzens the dashboard id is the id of the whole page. It was not included in the code I posted but you can get the idea by looking at the css code for expand-icon class :)

chris cozzens · Accepted Answer · 2017-03-23 00:41:35Z

0

.clickable-box:hover img {
    opacity: 0.7;
}

answered Mar 23, 2017 at 0:41

chris cozzens

5174 silver badges19 bronze badges

5 Comments

Dekel Over a year ago

Note that (almost) the same answer already posted, and your answer is missing the expand-icon class of the img tag.

chris cozzens Over a year ago

Looks like he beat me by a minute! dang lol should work the same as well. Cheers.

Dekel Over a year ago

You are welcome to upvote my answer :) regarding "should work the same" - correct, however if in the future he will add another image there - that iamge will also get that opacity on hover (and he wanted this specifically for the icon).

JkAlombro Over a year ago

Not working for me. I added more details to the question it might help you improve this answer.

wahwahwah Over a year ago

Please provide more detail... context... why this works outside of a css snip

Fraktar · Accepted Answer · 2017-03-23 00:51:31Z

0

img.pull-right.expand-icon:hover {
    opacity: 0.7;
}

CODEPEN DEMO

answered Mar 23, 2017 at 0:51

Fraktar

1991 silver badge13 bronze badges

1 Comment

JkAlombro Over a year ago

Not working for me. I added more details to the question it might help you improve this answer.

Collectives™ on Stack Overflow

Control child div css using parent div class

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related