如何“触发” css :hover 选择器？ [关闭]

Question

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

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

Answer 1

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

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 来确定当前窗口的高度/宽度并将其设置为该值（包括调整大小）或类似的东西来进一步优化