悬停选择器不同的 z-index

Question

我有两个 z-index 不同的 div（15 和 17），其中一个有一个工具提示（tooltipster 插件），另一个有一个带有 :hover 选择器的 CSS3 效果动画类。

这些 div 的大小和绝对位置完全相同（一个 div 在另一个 div 之上）。

当我将鼠标移到 z-index 17 的 div 上时，如何在通用模式下触发 :hover 选择器以触发 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-index...

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

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

就是这样……

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

possible solution using jQuery

谢谢！！

Answer 1

除非您知道生成的 HTML 的确切结构，否则仅使用 CSS 是不可能的，如Hover effect won't trigger underlying elements? 上的这个问题中所述

CSS :hover pseudo class 始终应用于顶部的元素。

这是一个插图：

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

---

如果标记看起来与您描述的完全一样，您可以使用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>

---

如果您不需要与前面的项目进行交互，您可以禁用pointer events（请注意browser compatibility for IE < 11，但随后您的工具提示处理会中断：

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

Answer 2

我想我明白，当有人将鼠标悬停在工具提示上时，您希望为它下方的任何 div 设置动画。如果是这样，我创建了一个Fiddle，我认为它可以做到这一点。它结合了您上面指向的覆盖功能与以下内容：

$(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 3

如果您使用类和相邻的兄弟连接器，它听起来就像您想要的那样。见Fiddle.

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

然后，悬停仅适用于 .toolipster div 下方的 .animation div。

Answer 4

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

.toolipster {
    pointer-events: none;
}

这应该将所有悬停和点击事件传递给它下面的元素，但当然，如果您只需要“较低”元素的交互性，这只是一个选项。

Answer 5

我不知道较低的 z-index div 的范围是什么（因为它仍然是隐藏的），

但一个解决方案可能是创建另一个具有更高 z-index 的 div 并给它opacity:0 然后悬停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>
   

Answer 6

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