悬停选择器差z-索引

Question

我有两个有不同z索引(15和17)的div，其中一个是工具提示(tooltipster插件)，另一个是CSS3效果动画类，其中一个是:悬浮选择器。

div的大小和绝对位置完全相同(一个div比另一个div)。

当我用z-index 17在div上传递鼠标时，如何在泛型模式下触发鼠标悬停选择器以触发z-index 15的div的CSS3动画？

<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

编辑：我需要在我的问题中添加一个问题，我不知道动画类的名称，也不知道其他div的z索引.

更多信息： Ok，我有一个工作区，用户可以将项目拖到工作区。对用户上传图像进行成像，选择一个用于上方的动画，并将一个图像拖到工作区，他希望附加一个交互区域“工具提示”。用户可以拖动“不可见的”div“区域交互”，并附加一个带有标题的工具提示。用户将这个不可见的div“区域交互”拖到图像上。稍后，其他用户将鼠标传递到图像上，必须发生两件事：

1.-显示工具提示2-触发器动画:悬停

只是那个..。

更新了重要的：我现在可以使用jQuery了

使用jQuery的可能解决方案

谢谢！！

Answer 1

我想我理解，当有人在工具提示上盘旋时，您想要在下面的任何div上动画 it。如果是这样的话，我已经创建了一个小提琴，我认为它可以做到这一点。它将上面所指向的覆盖函数与以下内容结合起来：

$(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');
        });
    }
  );
});

这个想法是有一个类(这里称为“动画”)，它在悬停时触发任何你想要的效果。当有人在工具提示上盘旋时，它会找到它下面的所有非工具提示，并添加动画类。当悬停结束时，它将移除动画类。

Answer 2

如果您使用类和相邻的同级连接器，它听起来就像做您想要的那样。请参阅小提琴。

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

然后，悬停只适用于刚好低于.animation div的.toolipster div。

Answer 3

您可以使用CSS忽略对其中一个元素的单击：

.toolipster {
    pointer-events: none;
}

这应该会在视觉上传递所有悬停并单击事件到其下方的元素，但是当然，这只是一个选项，如果您只需要在“较低”元素上进行交互。