[CSS] hover 死迴圈，不斷閃現。
阿新 • • 發佈：2018-12-14
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .content{ width: 300px; height: 300px; } .test{ width: 200px; height: 200px; background-color: red; } .test1:hover{ display: none; } .test2:hover > .item{ display: none; } </style> </head> <body> <div class="content"> <div class="test test1"> :hover display: none 不斷閃現 </div> </div> <div class="content"> <div class="test test2"> <div class="item"> 這個影藏了不會閃現 </div> </div> </div> </body> </html>
如上面的 程式碼：
造成閃現的原因：
當上面程式碼中 class="test1" 被 hover 後就隱藏，但是隱藏後該元素就沒有被hover住了又會顯示出來。顯示出來後又被hover 又被隱藏。這樣不斷重複就成了上面的不斷閃的效果。
我的解決方法：
我在test1 div 的程式碼基礎上增加了一個子元素。形成了test2 div的程式碼。 把內容寫在子元素裡面。當我想要hover隱藏內容時就隱藏被hover物件的子元素。那樣hover的作用也會一直生效。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
你還有其他的解決方法嗎？歡迎分享相應的解決方法。