Question

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

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

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

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

就是这样......

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

possible solution using jQuery

谢谢！

Answer 1

除非您知道生成的HTML的确切结构，否则只能通过Hover effect won't trigger underlying elements?上的此问题中描述的CSS来实现

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

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

如果标记看起来与您描述的完全相同，则可以使用adjacent sibling selector：

.toolipster:hover + div {    }

＆＃13;

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

＆＃13;

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

＆＃13;

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

.toolipster { 
  pointer-events: none;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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>

悬停选择器不同z-index

6 个答案: