如何“触发”CSS：悬停选择器？

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

注：我想我可以使用jQuery $(...).hover(in, out)解决这个问题，但我不知道是否有可能影响更根本的解决办法：悬停。毕竟，这个选择器对于这个目的来说非常方便。

来源

2013-10-18 Krivoi

请发布您的代码。 – j08691

重复？ http://stackoverflow.com/questions/11074815/jquery-trigger-hover-on-anchor – pbenard

您是否在寻找[this]（http://stackoverflow.com/questions/6222724/send-hover-event-programmatically）？ – Harry

经过几小时的摆弄和a little help from some friends我能够想出比以前更好的解决方案。该方法涉及在从扩展到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确定当前的窗口高度/宽度并将其设置为（包括调整大小）或类似的东西来进一步优化

来源

2013-10-18 14:21:48

不幸的是，这没有奏效。我运行了你的演示，把光标放在隐藏的“下一步”，动画结束后“下一步”没有出现。我必须移动鼠标才能看到它。 – Krivoi

你是对的，这只会在鼠标再次移动的情况下触发，这在我看来是可以接受的，如果你不想像你所知道的那样使用JavaScript的话。无论何时他们想要导航，用户移动鼠标 –

但我喜欢你制作动画的方式:)是否跨浏览器？ – Krivoi

如何“触发”CSS：悬停选择器？

回答

相关问题