How to highlight a div with children (with partial opacity layer?) Like Yahoo mail, see pic

Question

In Yahoo mail, when you are writing an email and you drag a file onto the page and hover, the message area becomes highlighted. It can be seen here: yahoo mail while drag-hovering a file over it

The part of this that I don't get is how to have the blue area appear with partial opacity over the things under it that are normally visible.

With:

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

If the msgContent is a child of blueBox:

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

and when msgBox is hovered I increase blueBox opacity from 0 to say 0.6, the blueBox will show but the msgContent div is hidden until the hover event. It should be visible always.

If the msgContent div is not a child of blueBox, then the blueBox doesn't cover it.

I've tried rgba (http://jsfiddle.net/mkasson/nJcxQ/19/) like here on SO, but it doesn't cover over the child elements.

Couldn't do my usual watching/inspecting via browser's webdev tools because focus was never on the browser while dragging the file onto it.

Thanks!

Josh Powell · Accepted Answer · 2013-12-13T19:43:39.347

2

Here is how I would go about this,

(What the problem is, you are using the parents background. You can't make the parents background go over it's content, that is not what a background does. It merely sites behind everything it is containing and acts as a background.)

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

What I am doing is placing an absolute span tag inside of the parent to act as the color overlay. When the parent is hovered the overlay child will become active by increasing it's opacity.

JSFIDDLE

edited Dec 13 '13 at 19:43

answered Dec 13 '13 at 19:38

Josh Powell

6,219
5
31
59

No problem! Best of luck in your design mate. – Josh Powell Dec 13 '13 at 19:53
And text, like "Drag and drop attachments here", goes in the span. – Mark Kasson Dec 13 '13 at 20:13
1

I made a few changes so refer to the fiddle, http://jsfiddle.net/Josh_JM/D4qLC/6/. I gave the background your rgba color and then used display none -> display block for the hover state. – Josh Powell Dec 13 '13 at 20:17
Was working on something similar at the same time. Your's is better. – Mark Kasson Dec 13 '13 at 21:39
Why thank you. :] Good luck mate and hopefully your design goes well! – Josh Powell Dec 13 '13 at 21:41
The ONE solution that I found that worked with my layout of having many children to messageContent is [dragout](https://github.com/dancork/jquery.event.dragout). I am showing the span layer over my form when I drag hover a file over the form. Drag hover does NOT work as nicely as mouse hover. (Dragleave fires when you move over a child element with no new dragenter for that child element.) [I found dragout here](http://stackoverflow.com/questions/10867506/dragleave-of-parent-element-fires-when-dragging-over-children-elements) – Mark Kasson Dec 15 '13 at 06:48

score 1 · Answer 2 · answered Dec 13 '13 at 19:43

1

Here's how I would do it.

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

answered Dec 13 '13 at 19:43

Kaizen Programmer

3,798
1
14
30

Thanks, Michael! This works too. Went with the css version. – Mark Kasson Dec 13 '13 at 19:52
1

One thing to consider about both of these solutions is being able to turn it off, if you want the user to be able to select the text. In a jQuery solution, you can set a variable (`isFileDrag=true`) elsewhere, and then modify the hover statement to only show if `isFileDrag==true` – Kaizen Programmer Dec 13 '13 at 20:26
1

Thanks, for that too. As shown, with just a `:hover`, yes it'd be a problem. I was just using that for demo purposes. I'm using [dropzone.js](http://www.dropzonejs.com/) which fires events `dragenter` and `dragleave`. I'll probably have listeners to those which use jQuery's `addClass` to turn the overlay on and off. – Mark Kasson Dec 13 '13 at 21:37

score 0 · Answer 3 · answered Dec 13 '13 at 19:40

0

The problem is that since content is a child of bluebox, then it inherits the 0 opacity.

answered Dec 13 '13 at 19:40

Mr. Mayers

366
1
6

How to highlight a div with children (with partial opacity layer?) Like Yahoo mail, see pic

3 Answers3