如何突出显示带有孩子的 div（带有部分不透明层？）就像雅虎邮件一样，参见图片

Posted 2023-05-08

【中文标题】如何突出显示带有孩子的 div（带有部分不透明层？）就像雅虎邮件一样，参见图片

【英文标题】：How to highlight a div with children (with partial opacity layer?) Like Yahoo mail, see pic

【发布时间】：2014-01-01 16:37:21

【问题描述】：

在 Yahoo 邮件中，当您编写电子邮件并将文件拖到页面上并悬停时，消息区域会突出显示。可以看这里：

我不明白的部分是如何让蓝色区域在其下方通常可见的事物上显示为部分不透明。

与：

#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 的不透明度从 0 增加到 0.6，blueBox 将显示，但 msgContent div 在悬停事件之前被隐藏。它应该始终可见。

如果 msgContent div 不是 blueBox 的子元素，则 blueBox 不会覆盖它。

我已经尝试过像here on SO 这样的 rgba (http://jsfiddle.net/mkasson/nJcxQ/19/)，但它并没有覆盖子元素。

无法通过浏览器的 webdev 工具进行我通常的观察/检查，因为在将文件拖到浏览器上时焦点从未在浏览器上。

谢谢！

【参考方案1】：

这就是我的处理方式，

（问题是，您使用的是父母背景。您不能让父母背景覆盖它的内容，这不是背景所做的。它只是位于它所包含的所有内容的后面并充当背景.)

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

【讨论】：

没问题！祝你的设计伙伴好运。

而文本，例如“将附件拖放到此处”，会出现在 span 中。

我做了一些更改，所以请参考小提琴jsfiddle.net/Josh_JM/D4qLC/6。我给了背景你的 rgba 颜色，然后使用 display none -> display block 作为悬停状态。

同时在做类似的事情。你的更好。

为什么谢谢你。 :] 祝你好运，希望你的设计顺利！

【参考方案2】：

我会这样做。

<div id='msgBox'>
   <div id='blueBox'>

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

CSS

#blueBox 
  background-color: #FFD090;
  opacity: 0.0;
  position: absolute;
  top: 0;
  left: 0;

jQuery

$("#msgBox").hover(function()
    $("#blueBox").css(top:$(this).css("top")).height($(this).outerHeight()).width($(this).outerWidth()).animate(opacity:0.6);
,function()
    $("#blueBox").animate(opacity:0).height(0).width(0);
);

http://jsfiddle.net/54cx7/2/

【讨论】：

谢谢，迈克尔！这也有效。使用 css 版本。

如果您希望用户能够选择文本，这两种解决方案需要考虑的一点是能够将其关闭。在 jQuery 解决方案中，您可以在别处设置变量 (isFileDrag=true)，然后修改悬停语句以仅显示 if isFileDrag==true

也谢谢你。如图所示，只有:hover，是的，这将是一个问题。我只是将它用于演示目的。我正在使用dropzone.js 触发事件dragenter 和dragleave。我可能会有听众使用 jQuery 的 addClass 来打开和关闭覆盖。

【参考方案3】：

问题是由于内容是bluebox的子对象，所以它继承了0的不透明度。