js悬停切换内容onmouseover

在 JavaScript 中，可以使用 `onmouseover` 事件来实现悬停切换内容的效果。具体实现步骤如下：

1. 在 HTML 中定义需要切换的元素和需要显示的内容。

<div id="hover-element">鼠标悬停在这里</div>
<div id="content-1" style="display: none;">显示内容1</div>
<div id="content-2" style="display: none;">显示内容2</div>

2. 使用 JavaScript 获取需要操作的元素。

var hoverElement = document.getElementById('hover-element');
var content1 = document.getElementById('content-1');
var content2 = document.getElementById('content-2');

3. 定义 `onmouseover` 事件处理函数，实现切换内容的逻辑。

hoverElement.onmouseover = function() {
    if (content1.style.display === 'none') {
        content1.style.display = 'block';
        content2.style.display = 'none';
    } else {
        content1.style.display = 'none';
        content2.style.display = 'block';
    }
};

上述代码中，当鼠标悬停在 `hover-element` 上时，会触发 `onmouseover` 事件处理函数，并切换显示内容。具体实现方式是通过修改 `display` 样式属性来实现的。当第一个内容需要显示时，将其样式的 `display` 设置为 `block`，同时将第二个内容的 `display` 设置为 `none`，反之亦然。