Prevent child element css from over writing

Question

I have two divs. Inner div (positioned absolute) is placed under outer Div (positioned relative). I have applied jquery toggle events on outer div to show and hide the inner div. I also want to change the opacity of outer div when click is done , then on second click outer div opacity should again be set to normal.

But issue is along with outer div , inner div's opacity is also getting set , even though I applied important flag in css also made child class more specific .

css of child class here :

> div#child.childclass {
      position:absolute;
      display:none;
      width:100px;
      left:15px;
      top:-20px;
      background-color:red;
      font-size:12px;
      text-align:center;
      opacity:1 !important;
  }

Fiddle example here : fiddle for above issue

Thanks

Answer 1

The opacity value of an element affects its content and therefore all its children elements.

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

Source : MDN

Workaround :

In your case, you can use rgba() color for the green dot and border. rgba() is a color value with opacity. This will change the opacity of the colors : green dot and border color without affecting the child element :

DEMO

;
var $p = $("div#parent");
var $c = $("div#child");

function firstFn(e) {
    if (e.target != e.currentTarget) { //not correct div
        console.log(e.target);
        return;
    }
    console.log("first click");
    $c.css("display", 'block');
    $p.addClass("active");

}

function secondFn(e) {
    if (e.target != e.currentTarget) { //not correct div
        console.log(e.target);
        return;
    }
    console.log("second click");
    $c.css("display", 'none');
    $p.removeClass("active");


}


// adding toggle function
$p.toggle(

function (e) {
    firstFn(e);
},

function (e) {
    secondFn(e);
});

  div#parent {
      width:20px;
      background-color:green;
      height:20px;
      margin:50px;
      cursor:pointer;
      position:relative;
      border:1px solid black;
      border-radius:100%;
  }
  div#child.childclass {
      position:absolute;
      display:none;
      width:100px;
      left:15px;
      top:-20px;
      background-color:red;
      font-size:12px;
      text-align:center;
      opacity:1 !important;
  }
  div#parent.active {
      background-color:rgba(0, 128, 0, .5);
      border:1px solid rgba(0, 0, 0, .5);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
toggle clicks on green circle
<div id="container">
    <div id="parent">
        <div id="child" class="childclass">some text here</div>
    </div>
</div>

Answer 2

separate both the parent and child and position it as per the #container

demo - http://jsfiddle.net/victor_007/Lk8h0xxg/7/

var $p = $("div#parent");
var $c = $("div#child");

function firstFn(e) {
  if (e.target != e.currentTarget) { //not correct div
    console.log(e.target);
    return;
  }
  console.log("first click");
  $c.css("display", 'block');
  $p.addClass("active");

}

function secondFn(e) {
  if (e.target != e.currentTarget) { //not correct div
    console.log(e.target);
    return;
  }
  console.log("second click");
  $c.css("display", 'none');
  $p.removeClass("active");


}


// adding toggle function
$p.toggle(

  function(e) {
    firstFn(e);
  },

  function(e) {
    secondFn(e);
  });

div#container {
  position: relative;
}
div#parent {
  width: 20px;
  background-color: green;
  height: 20px;
  margin: 50px;
  cursor: pointer;
  position: relative;
  border: 1px solid black;
  border-radius: 100%;
}
div#child.childclass {
  position: absolute;
  display: none;
  width: 100px;
  left: 46px;
  top: -20px;
  background-color: red;
  font-size: 12px;
  text-align: center;
  opacity: 1 !important;
}
.active {
  opacity: .5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
toggle clicks on green circle
<div id="container">
  <div id="parent"></div>
  <div id="child" class="childclass">some text here</div>
</div>

Answer 3

#container { position: relative; }  

div#parent {
      width:20px;
      background-color:green;
      height:20px;
      margin:50px;
      cursor:pointer;
      position:relative;
      border:1px solid black;
      border-radius:100%;
  }
  div#child.childclass {
      position:absolute;
      width:100px;
      left:15px;
      top:-20px;
      background-color:red;
      font-size:12px;
      text-align:center;
      opacity:1 !important;
  }
  .active {
      opacity:.5
  }

<div id="container">
    <div id="child" class="childclass">some text here</div>
    <div id="parent" class="active"></div>
</div>

Simply put, a child element cannot have a greater opacity than it's parent element.

Once you set the opacity of an element, then it, and all of it's children (and all of it's children's children, etc) will inherit that opacity.

Even if you do:

#parent { opacity:0.5; }
#child { opacity: 0.7; }

#child will actually have an opacity of 0.35 (which is 70% of an opacity of 0.5 - the opacity of it's parent).

The only solution is to have the #child in your example, not be a descendent of #parent, like so:

http://jsfiddle.net/Lk8h0xxg/6/