js实现hover导航

使用纯CSS实现hover导航效果

对于简单的hover导航效果，可以直接使用CSS的:hover伪类实现。这种方法不需要JavaScript，性能更好：

.nav-item {
  transition: all 0.3s ease;
}
.nav-item:hover {
  color: #ff5722;
  transform: translateY(-3px);
}

使用JavaScript增强hover效果

当需要更复杂的交互时，可以结合JavaScript实现：

const navItems = document.querySelectorAll('.nav-item');

navItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.style.transform = 'scale(1.05)';
    item.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';
  });

  item.addEventListener('mouseleave', () => {
    item.style.transform = 'scale(1)';
    item.style.boxShadow = 'none';
  });
});

实现下拉菜单效果

对于带下拉菜单的导航栏，可以这样实现：

const navWithDropdown = document.querySelector('.nav-with-dropdown');
const dropdownMenu = document.querySelector('.dropdown-menu');

navWithDropdown.addEventListener('mouseenter', () => {
  dropdownMenu.style.display = 'block';
  dropdownMenu.style.opacity = '0';
  dropdownMenu.style.transform = 'translateY(-10px)';

  setTimeout(() => {
    dropdownMenu.style.opacity = '1';
    dropdownMenu.style.transform = 'translateY(0)';
  }, 10);
});

navWithDropdown.addEventListener('mouseleave', () => {
  dropdownMenu.style.opacity = '0';
  dropdownMenu.style.transform = 'translateY(-10px)';

  setTimeout(() => {
    dropdownMenu.style.display = 'none';
  }, 300);
});

添加动画效果

使用CSS动画配合JavaScript可以实现更流畅的hover效果：

@keyframes navHover {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1.05); }
}

.nav-item.hovered {
  animation: navHover 0.3s forwards;
}

document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.classList.add('hovered');
  });

  item.addEventListener('mouseleave', () => {
    item.classList.remove('hovered');
  });
});

响应式导航实现

在移动设备上，可能需要将hover效果改为点击效果：

function setupNavInteraction() {
  const navItems = document.querySelectorAll('.nav-item');

  if (window.innerWidth < 768) {
    navItems.forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
        item.classList.toggle('active');
      });
    });
  } else {
    navItems.forEach(item => {
      item.addEventListener('mouseenter', () => {
        item.classList.add('hovered');
      });

      item.addEventListener('mouseleave', () => {
        item.classList.remove('hovered');
      });
    });
  }
}

window.addEventListener('resize', setupNavInteraction);
setupNavInteraction();

性能优化建议

使用事件委托减少事件监听器数量：

document.querySelector('.nav-container').addEventListener('mouseover', (e) => {
  if (e.target.classList.contains('nav-item')) {
    e.target.classList.add('hovered');
  }
});

document.querySelector('.nav-container').addEventListener('mouseout', (e) => {
  if (e.target.classList.contains('nav-item')) {
    e.target.classList.remove('hovered');
  }
});