如何“触发”css :悬停选择器

How can I "trigger" css :hover selector?

本文关键字：悬停 选择器 css 触发 如何      更新时间：2023-09-26

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

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

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

此处更新的演示 

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

相关文章：