CSS是網頁設計中不可或缺的一部分,使用CSS可以讓網頁看起來更加美觀,同時還可以實現一些實用的功能,比如移入顯示內容。
我們可以利用CSS的:hover選擇器來實現當鼠標移入指定元素時,顯示特定的內容。
/* HTML */ <div class="target"> <p>這是需要移入顯示的內容</p> </div> /* CSS */ .target p { display: none; } .target:hover p { display: block; }
在這個例子中,我們首先將需要顯示的內容的初始屬性設置為display: none;,即隱藏起來。然后設置:hover選擇器,當鼠標移入.target元素時,將內容的display屬性改為block,即顯示出來。
利用這個方法,我們可以輕松地實現一些交互式的效果,比如當鼠標移入一張圖片時,顯示該圖片的描述信息,或者當鼠標移入一個按鈕時,改變該按鈕的樣式等。