Hover selector differents z-index

Question

I have two divs with differents z-index (15 and 17), in one of them, I have a tooltip (tooltipster plugin) and in the other one I have an CSS3 effect animation class with :hover selector.

The divs are exactly the same size and the same absolute position (one div over the other div).

How can I trigger the :hover selector in generic mode to trigger the CSS3 animation of the div with z-index 15 when I pass the mouse over the div with z-index 17?

<div style="position: absolute;">
<div class="some-size toolipster" style="z-index: 20;"></div>
<div class="some-size animation" style="z-index: 19;"></div>
</div>

jsFiddle

EDIT: I need to add to my question that I don't know the name of class of the animation and I don't know the z-index of the other divs...

MORE INFO: Ok, I have a workspace where the user can drag items to the workspace. Imaging the user upload, select a animation for over and drag an image to the workspace, and he want to attach a interactive area "tooltip". The user can drag "invisible" divs "area interactive" and attach a tooltip with a title. The user drag this invisible div "area interactive" over the image. Later other user pass the mouse over the image and two thing must happen:

1.- Show tooltip 2.- Trigger animation :hover

Just that...

updated important: I could use jQuery now

possible solution using jQuery

Thanks!!

Not for me I don't know the name of the class animation @DanielPinzon — chemitaxis, Feb 12 '15 at 14:19
I need trigger the :hover selector always, indepent of the name of the class... :( — chemitaxis, Feb 12 '15 at 14:21
Even if you don't know the name of the class ... you know is right after the `toolipster` element ? Then you can use the tag name or some attribute or another thing to select — DaniP, Feb 12 '15 at 14:21
Nop, I don't know, because is the user who put the divs dragging. I need something "similar" to pointer-events: none; @DanielPinzon — chemitaxis, Feb 12 '15 at 14:23
I need something like "if you hover me dont' stop of hover other elements in the same position" :) — chemitaxis, Feb 12 '15 at 14:26
Unless you can change either you HTML structure or animation selector, I don't think this can be done with just CSS. — Alexander O'Mara, Feb 14 '15 at 18:05
Ok, I would like to trigger all the hover selector... indepent of the z-index order... just that... — chemitaxis, Feb 14 '15 at 18:07
@chemitaxis you would make it easier if you would tell us exactly what problem you are trying to solve. I think you have been going the wrong way about this, but all you are sharing with us is that wrong conclusion. Why not start at the beginning? — janfoeh, Feb 14 '15 at 18:07
http://stackoverflow.com/questions/1983169/hover-item-with-jquery looks like it is not possible — kleinohad, Feb 14 '15 at 18:12
Check out [Hover effect won't trigger underlying elements?](http://stackoverflow.com/q/16331754/1366033) — KyleMit, Feb 14 '15 at 18:17
Thanks! While I am having trouble making out the details, I'm getting the gist of it. Since you are probably already using a Javascript library (which one?) for the drag and drop operations, I would look for answers there - maybe in form of a callback. More questions: why don't you know anything about the element with the animation? Where does it come from? Do the animated element and the tooltip really share a common parent container (the `
` in your example)? — janfoeh, Feb 14 '15 at 18:26
@janfoeh, yes, I use jQuery, jQuery UI and a lot of more libraries. The two divs have a parent container div (workspace div). I know all about the divs, but I don't know if there are one over the one. — chemitaxis, Feb 14 '15 at 18:40
Seems to me you should convert the elements in question into [Droppables](http://jqueryui.com/droppable/) and trigger the animation on a `drop` event. — janfoeh, Feb 14 '15 at 19:01

score 7 · Answer 1 · edited May 23 '17 at 12:26

Unless you know the exact structure of the resulting HTML, this is not possible with just CSS as described in this question on Hover effect won't trigger underlying elements?

The CSS :hover pseudo class is always applied to the element on top.

Here's an illustration:

#div1, #div2, #div3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

#div1 { background: red;   left: 0px;  top: 0px; }
#div2 { background: green; left: 25px; top: 25px;}
#div3 { background: blue;  left: 50px; top: 50px;}

#div1:hover {
  background: maroon;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

If the markup looks exactly like you described, you could use an adjacent sibling selector:

.toolipster:hover + div {    }

.some-size.toolipster { background: red; }
.some-size.animation  { background: blue;}

.some-size {
    position: absolute;
    top: 20px;
    left: 20px;    
    width: 30px;
    height: 30px;
}
.toolipster:hover + div,
.toolipster + div:hover {
    cursor: pointer;

    -webkit-animation: grow-animationFrames ease 1s;
       -moz-animation: grow-animationFrames ease 1s;
        -ms-animation: grow-animationFrames ease 1s;
         -o-animation: grow-animationFrames ease 1s;
            animation: grow-animationFrames ease 1s;
    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
        -ms-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
       -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
         -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
         -o-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

@-webkit-keyframes grow-animationFrames {
    0%   { -webkit-transform: scaleX(1.00) scaleY(1.00); }
    100% { -webkit-transform: scaleX(2.00) scaleY(2.00); }
}
@-moz-keyframes grow-animationFrames {
    0%   { -moz-transform: scaleX(1.00) scaleY(1.00); }
    100% { -moz-transform: scaleX(2.00) scaleY(2.00); }
}
@-ms-keyframes grow-animationFrames {
    0%   { -ms-transform: scaleX(1.00) scaleY(1.00); }
    100% { -ms-transform: scaleX(2.00) scaleY(2.00); }
}
@-o-keyframes grow-animationFrames {
    0%   { -o-transform: scaleX(1.00) scaleY(1.00); }
    100% { -o-transform: scaleX(2.00) scaleY(2.00); }
}
@keyframes grow-animationFrames {
    0%   { transform: scaleX(1.00) scaleY(1.00); }
    100% { transform: scaleX(2.00) scaleY(2.00); }
}

<div style="position: absolute;">
    <div class="some-size toolipster" style="z-index: 20;"></div>
    <div class="some-size animation" style="z-index: 19;"></div>
</div>

If you didn't need to interact with the item in front, you could disable pointer events (just be aware of browser compatibility for IE < 11, but then you're tooltip handling would break:

.toolipster { 
  pointer-events: none;
}

#div1, #div2, #div3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

#div1 { background: red;   left: 0px;  top: 0px; }
#div2 { background: green; left: 25px; top: 25px;}
#div3 { background: blue;  left: 50px; top: 50px;}

#div1:hover {
  background: maroon;
}

#div2, #div3 {
  pointer-events: none;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Maybe with javascript I could make it http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection — chemitaxis, Feb 14 '15 at 21:44

score 2 · Accepted Answer · answered Feb 14 '15 at 23:40

I think that I understand that, when someone hovers over a tooltip, you want to animate any div that is below it. If so, I have created a Fiddle that I think does that. It combines the overlay function you point to above with the following:

$(function () {
  var divs = $('.some-size').not('.toolipster'),
    tooltips = $('.toolipster' );

  tooltips.hover(
    function() {
        var tip = this;
        divs.each(function() {
            if (overlaps(tip, this) && tip.style.zIndex > this.style.zIndex) {
                $(this).addClass('animation');
            }
        });
    },
    function() {
        $('.animation').each(function() {
            $(this).removeClass('animation');
        });
    }
  );
});

The idea is to have a class (here called "animation") that triggers whatever effect you want on hover. When someone hovers over a tooltip, it finds all of the non-tooltips below it and adds the animation class. When hover ends, it removes the animation class.

Well done, I will check carefully but looks great!! Much appreciated!! — chemitaxis, Feb 14 '15 at 23:49

score 1 · Answer 3 · answered Feb 14 '15 at 19:05

1

If you use classes and the adjacent sibling connector it sounds like it does what you want. See Fiddle.

.animation:hover,
.toolipster:hover + .animation{
...

The hover then only applies to the .animation div just below the .toolipster div.

answered Feb 14 '15 at 19:05

You mean you don't know what the class name is? If so, won't you know what it is by the time this goes into production? – Feb 14 '15 at 22:49
If you read my question I have added more information for understand the context. I know the class, but I would need to calculate with JS if one Div is over other Div, thanks mate ;) – chemitaxis Feb 14 '15 at 22:54

score 1 · Answer 4 · answered Feb 16 '15 at 02:00

You could use CSS to ignore clicks on one of the elements:

.toolipster {
    pointer-events: none;
}

This should pass all hover and click events to the element beneath it visually, but of course this is only an option if you only require interactivity on the "lower" element.

maioman · Answer 5 · 2015-02-19T09:42:13.057

I don't know what's the scope of the lower z-index div (since it remains hidden),

but a solution could be to create another div with higher z-index and give it opacity:0 and then on hover opacity:1

#div1, #div2{
  position: absolute;
  width: 100px;
  height: 100px;
  text-align:center;
  font-size: 3em;
}


#div1 { background: green; z-index:21;}
#div2 { background: blue;  z-index:22; opacity:0}

#div2:hover {
  background: maroon;   display:block ; opacity:1
}

<div id="div1">1</div>
<div id="div2">2</div>

score 0 · Answer 6 · answered Feb 21 '15 at 08:20

#div1, #div2, #div3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

#div1 { background: red;   left: 0px;  top: 0px; }
#div2 { background: green; left: 25px; top: 25px;}
#div3 { background: blue;  left: 50px; top: 50px;}

#div1:hover {
  background: maroon;
}



<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Hover selector differents z-index

6 Answers6