滾動鼠標時懸停div閃爍

Question

我有一個 div，當懸停在另一個 div 上時會出現這個 div。

但是，當我嘗試將鼠標移到出現的 div 上時，它會閃爍。 我知道這是由於我的 CSS 而發生的，但無法弄清楚我應該做些什么來糾正。

 .hoverbase { width: 300px; height: 300px; position: relative; } .hovertop { height: 200px; width: 200px; border: 2px solid red; background-color: white; position: absolute; top: 50px; left: 50px; margin: auto; visibility: hidden; } .hoverbase a:hover+.hovertop { visibility: visible; }

 <div class='hoverbase'> <a href=http://www.google.com.au> <img src='https://fakeimg.pl/300x300/949598/888888/' /></a> <div class='hovertop'> <a href=http://google.com.au> <h2>Project HA</h2> </a> </div> </div>

在 jsFiddle 上查看

Answer 1

正如您似乎知道的那樣， .hovertop閃爍是因為懸停和不懸停之間的快速交替。 當.hovertop可見且鼠標:hover在其上時， .hoverbase的:hover動作被取消， .hovertop消失。 那時， .hovertop不再覆蓋.hoverbase並且:hover操作被恢復。 只要您的鼠標懸停在.hovertop ，這種交替就會發生得很快並且永遠重復，從而產生閃爍效果。

在您的:hover狀態選擇器中包含.hovertop 。 這樣，無論鼠標在.hoverbase還是.hovertop ，它都將保持可見。

.hoverbase a:hover + .hovertop,
.hovertop:hover { /* << added this */
    visibility:visible; 
 }

在英語中，這轉化為：如果鼠標懸停在.hoverbase或.hovertop ，則顯示.hovertop 。

工作示例：

 .hoverbase { width: 300px; height: 300px; position: relative; } .hovertop { height: 200px; width: 200px; border: 2px solid red; background-color: white; position: absolute; top: 50px; left: 50px; margin: auto; visibility: hidden; } .hoverbase a:hover+.hovertop, .hovertop:hover { visibility: visible; }

 <div class='hoverbase'> <a href=http://www.google.com.au> <img src='//via.placeholder.com/350x150' /></a> <div class='hovertop'> <a href=http://google.com.au> <h2>Project HA</h2> </a> </div> </div>