[分享]css中导航鼠标点上去固定

在网页设计中，导航对于一个网站来说至关重要。为了让用户更加方便的进行浏览，我们可以添加一些交互效果。其中，鼠标点上去导航固定就是一种十分常见的效果。nav { : fixed; top: 0; lef...

在网页设计中，导航对于一个网站来说至关重要。为了让用户更加方便的进行浏览，我们可以添加一些交互效果。其中，鼠标点上去导航固定就是一种十分常见的效果。

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  transition: all 0.5s ease;
}

nav.active {
  background-color: #000;
  color: #fff;
} 

如上述代码所示，我们首先对导航进行了一些基本的设置，将其固定在页面的顶部，同时设置了其背景颜色等属性。接着，我们为导航添加了一个动画效果，当鼠标滑过导航时，导航的背景色和文字颜色会发生变化。

此外，我们还需要使用JavaScript来实现当鼠标离开导航时，导航的背景色和文字颜色又可以恢复到原来的状态。具体实现方法可以参考如下代码：

var nav = document.querySelector('nav');

nav.addEventListener('mouseenter', function () {
  this.classList.add('active');
});

nav.addEventListener('mouseleave', function () {
  this.classList.remove('active');
}); 

在上述代码中，我们使用了addEventListener方法来给导航添加了两个事件，当鼠标进入导航时，其会触发mouseenter事件，从而使导航的class属性添加active类。当然，当鼠标离开导航时，其也会触发mouseleave事件，使得导航的class属性又移除了active类。这样便可以实现导航鼠标点上去固定的效果。