CSS中有一種效果是當鼠標不動的時候隱藏元素,可以通過:hover偽類和transition屬性實現。
/* 首先定義需要隱藏的元素 */ .hidden { opacity: 0; transition: opacity 0.5s ease-in-out; } /* 當鼠標懸停在目標元素上的時候,讓其opacity屬性變成1,即顯示出來 */ .target:hover + .hidden { opacity: 1; }
以上代碼中,.target表示需要懸停的目標元素,+符號表示它的下一個兄弟元素,.hidden表示需要隱藏的元素。當鼠標移動到.target元素上時,.hidden元素就會顯示出來,當鼠標離開.target元素后,.hidden元素又會隱藏起來。
這個效果在現代網頁中非常常見,可以用于交互引導或者顯示更多信息等等。