css鼠标点击之后导航变色跳转

实现鼠标点击后导航变色并跳转的效果，可以通过CSS和Javascript来完成。

首先，在CSS中，我们可以使用:hover伪类选择器来定义鼠标悬停时导航的样式，例如改变背景颜色。例如：

.nav-item:hover {
  background-color: yellow;
}

这将使鼠标悬停在导航菜单项上时，背景颜色变为黄色。

接下来，在Javascript中，我们可以使用事件监听器来捕获鼠标点击事件，并在点击事件发生时执行相应的操作，例如页面跳转。例如：

document.querySelector('.nav-item').addEventListener('click', function() {
  // 执行页面跳转操作
  window.location.href = 'http://example.com';
});

这将在点击导航菜单项时触发事件监听器函数，并执行页面跳转操作。

为了结合两者，我们可以将上述代码结合起来：

.nav-item:hover {
  background-color: yellow;
}

.nav-item.clicked {
  background-color: green;
}

document.querySelector('.nav-item').addEventListener('click', function() {
  // 添加clicked类名来改变背景颜色
  this.classList.add('clicked');
  // 执行页面跳转操作
  window.location.href = 'http://example.com';
});

这样，当鼠标悬停在导航菜单项上时，背景颜色将变为黄色；而在点击后，背景颜色将变为绿色，并执行页面跳转操作。

以上就是使用CSS和Javascript实现鼠标点击后导航变色并跳转的基本方法。