css鼠标悬停改变颜色

以下是使用CSS实现鼠标悬停改变颜色的代码示例：

<ul>
  <li><span>图标1</span></li>
  <li><span>图标2</span></li>
  <li><span>图标3</span></li>
</ul>

/* 实现动画 */
ul li span {
  transition: all 0.5s ease-in-out;
}

/* 图标悬停变色，并让上面的图标高度从0到100% */
ul li:nth-child(1):hover span:first-child {
  color: #1da1f2;
  height: 100%;
}

ul li:nth-child(2):hover span:first-child {
  color: #25d366;
  height: 100%;
}

ul li:nth-child(3):hover span:first-child {
  color: #f00;
  height: 100%;
}

这段代码使用了CSS的`transition`属性来实现动画效果。当鼠标悬停在列表项上时，通过`:hover`伪类选择器和`nth-child`选择器来选择对应的图标，并改变其颜色和高度。

相关问题

css鼠标悬停改变字体颜色

鼠标悬停改变字体颜色可以使用CSS的hover伪类选择器来实现。你可以在需要改变字体颜色的元素上使用:hover属性，并设置想要的颜色值。

例如，如果你想要在鼠标悬停时将字体颜色改为红色，你可以这样写CSS代码：

.element:hover {
  color: red;
}

请将".element"替换为你想要应用效果的元素选择器，将"red"替换为你希望的颜色值。

html鼠标悬停改变边框颜色

可以通过CSS的:hover伪类来实现鼠标悬停时改变元素的边框颜色。具体实现方法如下：

1. 首先给要改变边框颜色的元素设置一个初始的边框样式，比如：

div {
  border: 1px solid #ccc;
}

2. 然后使用:hover伪类来定义鼠标悬停时改变元素的边框颜色，比如：

div:hover {
  border-color: red;
}

这样，当鼠标悬停在div元素上时，边框的颜色就会变成红色。你可以根据需要修改颜色值和元素选择器。