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

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:

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

---

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

<!-- language: lang-css -->

.toolipster:hover + div {    }

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

---

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:

<!-- language: lang-css -->

.toolipster { 
  pointer-events: none;
}

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->