Question

所以这是我的代码，显然它不起作用....基本上我希望能够在隐藏父级时看到#child

 <style>
 #parent { opacity : 0 }
 #parent:hover { opacity : 1 }
 #child { opacity:1 }
 </style>

  <div id="parent">
       <h1 id="child"> title </h1>
       <span>aaaa</span>
       <span>aaaa</span>
       <span>aaaa</span>
    </div>

它是非常大的代码的一部分，有许多jquery效果和代码，其他人已经写了，我不想弄乱任何东西所以我真的不想移动#child在#parent之外

Answer 1

元素的不透明度来自其父元素：

MDN：一个元素及其包含的子元素都具有相同的不透明度相对于元素的背景，即使元素及其元素孩子们彼此之间有不同的不和谐。

解决这个问题的一种方法是使用rgba颜色而不是不透明度：

＆＃13;

 #parent {
     color:rgba(0, 0, 0, 0);
 }
 #parent:hover {
     color:rgba(0, 0, 0, 1);
 }
 #child {
     color:rgba(0, 0, 0, 1);
 }

＆＃13;

<div id="parent">
 <h1 id="child"> title </h1>
 <span>aaaa</span>
 <span>aaaa</span>
 <span>aaaa</span>
</div>

＆＃13;

设置孩子的不透明度从它的父母那里变大

1 个答案: