前端 鼠标悬停内容

在前端开发中，可以使用CSS和JavaScript来实现鼠标悬停内容的效果。以下是两种常见的实现方式：

1. 使用CSS的:hover伪类：可以通过在CSS中使用:hover伪类来实现鼠标悬停时改变内容的样式。例如，可以在:hover伪类中修改元素的颜色、背景色、边框等属性，从而实现鼠标悬停内容变化的效果。

.hover-content:hover {
  color: red;
  background-color: yellow;
}

2. 使用JavaScript事件监听：可以通过JavaScript来监听鼠标悬停事件，并在事件触发时修改内容。例如，可以使用addEventListener()方法监听元素的mouseover（鼠标进入）和mouseout（鼠标离开）事件，然后在事件处理函数中修改元素的内容。

const hoverContent = document.querySelector('.hover-content');

hoverContent.addEventListener('mouseover', function() {
  hoverContent.textContent = '鼠标悬停内容';
});

hoverContent.addEventListener('mouseout', function() {
  hoverContent.textContent = '默认内容';
});

这样，当鼠标进入.hover-content元素时，内容会变为"鼠标悬停内容"，当鼠标离开时，内容会恢复为"默认内容"