Question

我的页面上有一个图片库。有一个图像和图库导航：下一个和以前的按钮。默认情况下，导航是隐藏的，但当鼠标光标位于图像的右半部分时， next 按钮可见（：悬停 css选择器）。 next 按钮会导致动画，其中包含导航按钮。问题是在动画结束后图像的右半部分没有悬停。我必须执行任何鼠标操作才能使 next 按钮可见。所以这是我的问题：有没有办法在动画结束后“触发”：悬停选择器？

注意：我想我可以使用jQuery $(...).hover(in, out)来解决这个问题，但我想知道是否有更多基础解决方案可以影响：hover 。毕竟，这个选择器更方便用于此目的。

Answer 1

经过几个小时的摆弄和a little help from some friends我能够找到比以前更好的解决方案。该方法涉及在悬停元素之前使用透明元素，该元素从width:0px; height:0px;扩展到width:10000px; height:10000px;并触发与库相同的悬停事件以显示next元素。使用此方法，无论鼠标在页面上的哪个位置，都会显示next，但只有在动画完成后才会显示。{/ p>

Updated Demo Here

body { overflow:hidden; }
#hoverHelper {
    width:0px;
    height:0px;
    z-index:1;
    position:absolute;
    margin-top:-1000px;
    margin-left:-1000px;
    animation: hhAnimation .001s 3s forwards;
}
#actualHover {
    width:50px;
    height:50px;
    background:teal;
    animation: yourAnimation 3s linear forwards;
}
#next {
    z-index:2;
    position:relative;
    display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
    display:inline-block;
}
@keyframes yourAnimation {
    0% { background:teal; }
    100% { background: red; }
}
@keyframes hhAnimation {
    0% { width:0px;
         height:0px;
}
100% { width:10000px;
       height:10000px;
     }
}

HTML（只是确保#next在其他人之后）

<div id='actualHover'></div>
<div id='hoverHelper'></div>
<a id='next'>Next</a>

我还添加了一些javascript以允许它重复并向您展示如何访问它

解决方案应完全跨浏览器。关于它的唯一不利之处是身体上的overflow:hidden可以通过使用javascript来确定当前窗口高度/宽度并将其设置为（包括调整大小）或类似的东西来进一步优化

我怎样才能“触发”css：悬停选择器？

1 个答案: