css的hover效果 |css 动态效果

.button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.button:hover {
background-color: white;
color: #008CBA;
}

如上代码所示，大家首先定义一个.button的样式，包括背景色、文字颜色、内边距以及圆角半径，并设置了过渡效果。当鼠标移到.button上时，.button:hover的样式会覆盖原来的样式，背景色变为白色，文字颜色变为蓝色。

除了背景色和文字颜色外，hover效果还可以改变字体大小、边框样式、阴影效果、透明度等，可以根据自己的需要进行调整。

.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-desc {
opacity: 1;
}
.img-desc {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px;
opacity: 0;
transition: opacity 0.3s;
}

上面的代码演示了一个图片与描述文字的效果，当鼠标移到图片上时，描述文字的透明度变为1，实现了文字的渐显效果。该代码中使用了position属性完成文字位置的定位，并且使用了transition属性设置文字的过渡效果。

总的来说，CSS中的hover效果是一种常用的交互设计，可以通过变化样式增强网页的趣味性和用户体验。大家可以使用不同的属性进行hover效果的设置，根据需要灵活调整样式，让网页更加美观和实用。