如何「觸發」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：懸停選擇器？

回答

相關問題