transition实现的鼠标悬停淡入淡出的效果

过渡（Transition）是一种CSS技术，用于平滑地改变元素从一种样式状态到另一种状态的过程，比如鼠标悬停时的视觉效果。为了实现鼠标悬停时的淡入淡出效果，你可以利用`transition`属性。这个属性通常包括三个部分：

1. **选择器**: 指定应用过渡效果的元素，如`.my-element`。
2. **属性**: 要过渡的CSS属性，如`opacity`（透明度）、`background-color`（背景颜色）等。
3. **持续时间**: 定义过渡的时间长度，例如`0.5s`。
4. **过渡模式**: 可选的，指定何时开始和结束过渡，如`hover`表示当鼠标悬停时。

基本语法如下：

.my-element {
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out; /* Webkit内核，如Chrome和Safari */
  -moz-transition: opacity 0.5s ease-in-out; /* Firefox */
  -o-transition: opacity 0.5s ease-in-out; /* Opera */
  transition: opacity 0.5s ease-in-out; /* 标准浏览器 */
}

.my-element:hover {
  opacity: 0.5; /* 鼠标悬停时，元素的透明度变为0.5 */
}

在这个例子中，当用户将鼠标悬停在`.my-element`上时，元素的透明度会从完全可见（1）逐渐淡出到半透明（0.5），移开鼠标后又会恢复到原来的清晰状态。