防止子元素 css 过度写入

Question

我有两个 div。内部 div（绝对定位）放置在外部 Div（相对定位）之下。 我在外部 div 上应用了 jquery 切换事件来显示和隐藏内部 div。我还想在单击完成时更改外部 div 的不透明度，然后在第二次单击时外部 div 不透明度应再次设置为正常。

但问题在于外部 div ，内部 div 的不透明度也在设置，即使我在 css 中应用了重要标志也使子类更加具体。

这里是子类的css：

> 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 for above issue

谢谢

Answer 1

元素的不透明度值会影响其内容，进而影响其所有子元素。

该值适用于整个元素，包括其内容， 即使该值不被子元素继承。因此，一个 元素及其包含的子元素都具有相同的不透明度相对 到元素的背景，即使元素及其子元素有 相对于彼此不同的不透明度。

来源：MDN

解决方法：

在您的情况下，您可以使用rgba() 颜色作为绿点和边框。 rgba() 是具有不透明度的颜色值。这将改变颜色的不透明度：绿点和边框颜色而不影响子元素：

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

将父子元素分开并按照#container定位

演示 - 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>

简单地说，子元素不能比它的父元素有更大的不透明度。

一旦您设置了一个元素的不透明度，那么它以及它的所有子元素（以及它的所有子元素的子元素等）都将继承该不透明度。

即使你这样做：

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

#child 实际上的不透明度为 0.35（这是不透明度 0.5 的 70% - 它的父项的不透明度）。

唯一的解决方案是在您的示例中使用#child，而不是#parent 的descendent，如下所示：

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