css导航栏鼠标放上去变色

CSS导航栏鼠标放上去变色是网页设计中常用的效果之一。通过CSS的:hover伪类可以轻松实现这一效果。下面是一个简单的示例。

/* 导航栏样式 */
.nav {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  padding: 10px;
}

/* 导航链接样式 */
.nav a {
  color: #fff;
  text-decoration: none;
  padding: 5px;
}

/* 鼠标放上去样式 */
.nav a:hover {
  background-color: yellow;
  color: #333;
}

在上面的代码中，.nav类定义了导航栏的样式，包含了flex布局、背景色和padding。.nav a定义了导航链接的样式，包含了颜色、文本装饰和内边距。.nav a:hover定义了鼠标放上去后的样式，包含了背景色和文字颜色。

通过这种方式，当鼠标放上去时，导航链接的背景色和文字颜色会发生变化，提升了用户的体验。此外，也可以通过其他CSS属性如border、Box-shadow等实现更丰富的效果，让导航栏更加美观和互动。