html - 如何突出显示带有 child 的div(具有部分不透明层？)像Yahoo邮件一样，请参见pic

在Yahoo mail中，当您编写电子邮件并将文件拖到页面上并悬停时，邮件区域将突出显示。从这里可以看出：
我没有得到的部分是如何让蓝色区域出现在它下面通常可见的东西的部分不透明度。
使用：

#blueBox {
background-color: #FFD090;
opacity: 0.0;
}

如果msgContent是blueBox的孩子：

<div id='msgBox'>
   <div id='blueBox'>
      <div id='msgContent'>
       ... all the message contents, buttons, etc.
      </div>
   </div>
</div>

当msgBox悬停时，我将blueBox opacity从0增加到0.6，blueBox将显示，但msgContent div将隐藏，直到出现悬停事件。它应该总是可见的。
如果msgContent div不是blueBox的子级，那么blueBox不会覆盖它。
我试过rgba（http://jsfiddle.net/mkasson/nJcxQ/19/）类似于here on SO，但它没有覆盖子元素。
无法通过浏览器的webdev工具进行我通常的监视/检查，因为在将文件拖到浏览器上时，焦点从不在浏览器上。
谢谢！

最佳答案

我要这样做，
（问题是，你用的是父母的背景。你不能让父母的背景超过它的内容，这不是背景的作用。它只不过是在它所包含的所有内容后面建立站点，并充当背景。）
html，

<div class="messageContent">
    <span class="overlay"></span>
    <p>Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.</p>
    <a href="#">This is a link</a>
</div>

css，

.messageContent {
    color: #000;
    position: relative;
    height: 100%;
    width: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: lightBlue;
    opacity: 0;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 100;
}

.messageContent:hover .overlay {
    opacity: 0.6;
}

我要做的是在父对象内部放置一个绝对span标记，作为颜色覆盖。当父对象悬停时，overlay子对象将通过增加其不透明度而变为活动状态。
JSFIDDLE

关于html - 如何突出显示带有 child 的div(具有部分不透明层？)像Yahoo邮件一样，请参见pic，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20574477/