0

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

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

4

1 回答 1

2

经过几个小时的摆弄和一些朋友的帮助，我能够想出一个比以前更好的解决方案。该方法涉及在悬停元素之前使用透明元素，该元素从width:0px; height:0px;to扩展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 来确定当前窗口高度/宽度并将其设置为该值（包括调整大小）或类似的东西来进一步优化它

于 2013-10-18T14:21:48.730 回答