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

#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，而不是descendent #parent，如下所示：

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

Answer 2

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

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

来源：MDN

解决方法：

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

<强> DEMO

＆＃13;

;
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);
});

＆＃13;

  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);
  }

＆＃13;

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

＆＃13;

Answer 3

将父级和子级分开，并根据#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>

防止儿童元素css过度写作

3 个答案: