CODEWITHSUNDEEP
css
its.me.chand
its.me.chand

Reputation: 95

:active for parent div class not working for child div

I have a button made of divs; .parent div has child divs; one div with an icon and other with a span for text. 

<div class="parent" style="width:100px;height:100px;">
    <div class="child1" style="width:50px;height:50px;">
        <img src="#"/>
    </div>
    <div class="child2" style="width:20px;height:20px;">
        <span>hii</span>
    </div>
</div>


.parent:active{ background: red;}

this only works when I click out of child div's and inside parent div. but I need for the whole area.

This is working fine in chrome but not in IE. I need a solution that works in both chrome and IE.

Upvotes: 0

Views: 173

Answers (1)

IvanS95
IvanS95

Reputation: 5742

Why not use an actual button with its active state?

EDIT: I noticed you mentioned this doesn't work in IE, this is because in IE, the clickable area is behind the content you put on the parent div, for whatever reason, honestly I don't understand that very well; but fixes I have found include setting a ::before and ::after pseudo-class to the parent div, with the following properties: 

.parent:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


button {
  width: 100px;
  height: 100px;
}

button:active {
  background-color: red;
}

.parent {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.parent:active {
  background-color: red;
  border: 1px solid #000;
}

.parent:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<button>
  <img src="#"/>
  <span>Text</span>
</button>

<div class="parent">
  <div class="child1" style="width:50px;height:50px;border:1px solid blue;">
    <img src="#" />
  </div>
  <div class="child2" style="width:20px;height:20px;border:1px solid green;">
    <span>hii</span>
  </div>
</div>

Upvotes: 3

Related Questions