本文是AtoZ CSS系列的一部分。您可以在此處找到本系列的其他條目：查看完整系列 查看懸停效果的完整視頻和文字記錄

歡迎來(lái)到我們的AtoZ CSS系列！在本系列中，我將從字母表中的字母開(kāi)始，探索不同的CSS值（和屬性）。我們知道，有時(shí)屏幕截圖是不夠的，在這篇文章中，我們?yōu)槟砑恿艘粋€(gè)關(guān)於懸停效果的新技巧。

H代表懸停和高度

關(guān)於懸停效果，我在關(guān)於字母H的視頻中已經(jīng)介紹了很多，這裡不再贅述。但是，您可以為懸停狀態(tài)應(yīng)用一些很酷的動(dòng)畫(huà)效果。在Google上搜索“CSS hover effects”，您會(huì)找到很多。

以下是一些具有巧妙效果的網(wǎng)站：

• Codrops: CSS transition hover effects
• Design Shack: Copy Paste hover effects
• CSS-Tricks: pop hovers

此外，我最近為Code School製作了一個(gè)視頻，內(nèi)容全部關(guān)於一個(gè)名為hover.css的庫(kù)。

另一個(gè)CSS H屬性（在本網(wǎng)站上我沒(méi)有詳細(xì)介紹）是height（高度）。

height屬性用於定義包含元素的內(nèi)容高度。所有標(biāo)準(zhǔn)的長(zhǎng)度單位（如px、em、rem、%、vw、vh和其他單位）都可以用來(lái)控制高度。

如果未明確設(shè)置元素的高度，則將其計(jì)算為容納所有包含元素的最小高度（對(duì)應(yīng)於默認(rèn)值auto）。

通常建議避免在任何元素上明確設(shè)置高度，因?yàn)樗鼤?huì)限制元素的靈活性——這意味著它不能隨著內(nèi)容的變化而增長(zhǎng)。在響應(yīng)式設(shè)計(jì)中，當(dāng)內(nèi)容需要隨著可用寬度的變化而垂直重新排列時(shí)，這一點(diǎn)尤其重要。

因此，我傾向於只在具有預(yù)定義尺寸的元素（如圖像）上設(shè)置高度。另一個(gè)用例是在使用絕對(duì)或固定定位時(shí)，高度（和寬度）會(huì)圍繞定位元素收縮包裹。

以下示例演示了設(shè)置固定高度的問(wèn)題。

查看示例代碼

雖然第一組文本看起來(lái)樣式正確，但是一旦文本比樣式短或長(zhǎng)，樣式就不再正確了——包含框顯得太大，或者文本溢出框外。

解決文本溢出的一個(gè)方法是使用overflow屬性，但這會(huì)截?cái)辔谋緛K使其無(wú)法閱讀。

如果一開(kāi)始不指定高度，就可以完全避免這種情況。如果我可以不做任何事情就提高代碼的靈活性，我會(huì)毫不猶豫地選擇這樣做！

關(guān)於CSS懸停高度的常見(jiàn)問(wèn)題解答 (FAQs)

什麼是CSS懸停效果，它是如何工作的？

CSS懸停效果是一個(gè)偽類(lèi)，用於在鼠標(biāo)指針懸停在元素上時(shí)應(yīng)用樣式。它通常用於在網(wǎng)頁(yè)上創(chuàng)建交互式效果，例如在鼠標(biāo)懸停在按鈕上時(shí)更改按鈕的顏色。懸停效果是通過(guò)使用“:hover”選擇器，後跟要更改的CSS屬性來(lái)應(yīng)用的。例如，要在鼠標(biāo)懸停在按鈕上時(shí)將按鈕的背景顏色更改為紅色，可以使用以下代碼：

button:hover {
  background-color: red;
}

如何使用CSS懸停效果更改元素的高度？

您可以通過(guò)在懸停規(guī)則中指定新的高度來(lái)使用CSS懸停效果更改元素的高度。例如，如果您想在鼠標(biāo)懸停在div元素上時(shí)增加其高度，可以使用以下代碼：

div:hover {
  height: 200px;
}

在此示例中，當(dāng)鼠標(biāo)懸停在div上時(shí)，div的高度將更改為200px。

我可以將CSS懸停效果與媒體查詢一起使用嗎？

是的，您可以將CSS懸停效果與媒體查詢一起使用以創(chuàng)建響應(yīng)式懸停效果。例如，您可以使用媒體查詢僅在屏幕具有特定寬度時(shí)應(yīng)用懸停效果。這是一個(gè)示例：

@media (min-width: 600px) {
  div:hover {
    height: 200px;
  }
}

在此示例中，只有當(dāng)屏幕寬度至少為600px時(shí)，才會(huì)應(yīng)用懸停效果。

我可以一次使用CSS懸停效果更改多個(gè)屬性嗎？

是的，您可以一次使用CSS懸停效果更改多個(gè)屬性。例如，您可以在鼠標(biāo)懸停在div元素上時(shí)更改div元素的高度、寬度和背景顏色。這是一個(gè)示例：

div:hover {
  height: 200px;
  width: 200px;
  background-color: red;
}

在此示例中，當(dāng)鼠標(biāo)懸停在div上時(shí)，div的高度、寬度和背景顏色都會(huì)發(fā)生變化。

我可以使用CSS懸停效果創(chuàng)建過(guò)渡效果嗎？

是的，您可以將CSS懸停效果與transition屬性結(jié)合使用以創(chuàng)建平滑的過(guò)渡效果。例如，您可以創(chuàng)建一個(gè)過(guò)渡效果，在鼠標(biāo)懸停在div元素上時(shí)，在2秒內(nèi)逐漸更改div元素的高度。這是一個(gè)示例：

div {
  transition: height 2s;
}

div:hover {
  height: 200px;
}

在此示例中，當(dāng)鼠標(biāo)懸停在div上時(shí)，div的高度將在2秒內(nèi)逐漸更改為200px。

請(qǐng)注意，我替換了所有圖片鏈接為佔(zhàn)位符，因?yàn)槲覠o(wú)法訪問(wèn)原始圖片。 請(qǐng)將佔(zhàn)位符替換為實(shí)際的圖片鏈接。 同樣，文章中需要鏈接的地方也用佔(zhàn)位符代替，請(qǐng)根據(jù)實(shí)際情況替換。

以上是ATOZ CSS快速提示：使用懸停和高度的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！