溫馨提示×

CSS中hover有哪些常見用法

css
小樊
207
2024-10-21 19:13:46
欄目: 編程語言

在CSS中,hover偽類選擇器用于為鼠標懸停在元素上時的元素應用樣式。以下是一些常見的hover用法:

  1. 改變顏色:
a:hover {
  color: red;
}

當鼠標懸停在鏈接上時,鏈接的顏色會變為紅色。

  1. 改變背景顏色:
button:hover {
  background-color: blue;
}

當鼠標懸停在按鈕上時,按鈕的背景顏色會變為藍色。

  1. 顯示隱藏元素:
div:hover #hidden-element {
  display: block;
}

當鼠標懸停在div元素上時,會顯示ID為hidden-element的元素。

  1. 改變尺寸:
div:hover {
  width: 200px;
  height: 200px;
}

當鼠標懸停在div元素上時,div的尺寸會變為200px x 200px。

  1. 添加過渡效果:
a:hover {
  color: red;
  transition: color 0.3s ease;
}

當鼠標懸停在鏈接上時,鏈接的顏色會在0.3秒內平滑地過渡到紅色。

  1. 鼠標移出時恢復原狀:
a:hover, a:hover:after {
  color: blue;
}
a:hover:after {
  content: " (hover me)";
}
a:not(:hover):after {
  content: "";
}

當鼠標懸停在鏈接上時,鏈接的文字顏色會變為藍色,并顯示" (hover me)“。當鼠標移出鏈接時,文字顏色恢復為原色,同時” (hover me)"也會消失。

這些只是hover的一些基本用法,實際上hover可以與其他CSS屬性和選擇器結合使用,實現更豐富的交互效果。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女