CSS是一種網站設計和排版的語言，它可以控制網站中所有元素的外觀。其中一個常用的CSS效果就是鼠標放上下拉的效果。
下面我們來看一個例子，代碼如下：
.dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}首先我們在HTML中創建一個包含下拉菜單的div，并添加兩個子元素。第一個子元素是用于觸發下拉菜單的按鈕，我們把它的類設置為“dropdown”。第二個子元素是下拉菜單本身，我們把它的類設置為“dropdown-content”。
接下來我們使用CSS來定義樣式。首先我們把“dropdown”類設置為“position: relative”，這是為了后面定義“dropdown-content”的位置時需要用到。接著我們設置“cursor: pointer”，這是為了鼠標放上去后變成手形光標。
接下來我們設置“dropdown-content”類。我們將其“display”屬性設置為“none”，這是為了一開始不顯示下拉菜單。接著我們設置“position: absolute”，這是為了它可以放在按鈕下面。我們將“top”屬性設置為“100%”，這是為了使下拉菜單出現在按鈕的下面。最后我們設置“z-index: 1”，這是為了使下拉菜單在其他元素之上。
最后我們設置鼠標放上去時的效果。我們在“dropdown”類上利用偽類“:hover”來定義此效果。我們設置“dropdown-content”的“display”屬性為“block”，這是為了讓下拉菜單在鼠標放上去時出現。
到這里，我們就完成了鼠標放上下拉的效果了。如果您想要給您的網站添加這個效果，請參考這個例子并根據您的需要進行調整。
上一篇css 鼠標移入變成手
下一篇css+img+網絡不佳