悬停选择器不同z-index

Question

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

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

使用jQuery的可能解决方案

谢谢!!

Answer 1

除非您知道生成的HTML的确切结构,否则仅使用CSS就不可能,因为此问题中描述的悬浮效果不会触发底层元素？

CSS :hover伪类始终应用于顶部的元素.

这是一个例子:

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

如果标记看起来与您描述的完全相同,则可以使用相邻的同级选择器:

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

如果你不需要与前面的项目进行交互,你可以禁用指针事件(只要知道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>