CODEWITHSUNDEEP
htmlcss
chemitaxis
chemitaxis

Reputation: 14899

Hover selector differents z-index

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

Upvotes: 2

Views: 2750

Answers (6)

jas
jas

Reputation: 1

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

Upvotes: 0

KyleMit
KyleMit

Reputation: 30027

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>

Upvotes: 7

maioman
maioman

Reputation: 18764

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>

Upvotes: 1

praniclift
praniclift

Reputation: 126

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.

Upvotes: 1

user488187
user488187

Reputation:

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.

Upvotes: 2

user488187
user488187

Reputation:

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.

Upvotes: 1

Related Questions