我试图在鼠标进入一个框时显示一个元素的内容，然后在鼠标离开时隐藏它，并在鼠标进入/离开一个单独的框时执行相同的操作(但内容不同)。我可以使用它，但我确信有一种更干净的方法可以做到这一点，任何帮助都会很棒。
<body>
<div class="boxes">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<div class="content">
<h2>Welcome</h2>
<div class="text1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam animi adipisci vitae repudiandae, iure modi ut facilis eligendi quia consectetur, saepe veniam voluptates debitis consequatur placeat! Quam laudantium velit dolor.</p>
</div>
<div class="text2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam animi adipisci vitae repudiandae, iure modi ut facilis eligendi quia consectetur, saepe veniam voluptates debitis consequatur placeat! Quam laudantium velit dolor.</p>
</div>
</div>
这是 JavaScript
var txt1 = document.querySelector('.text1');
var box1 = document.querySelector('.box1');
var txt2 = document.querySelector('.text2');
var box2 = document.querySelector('.box2');
box1.addEventListener('mouseenter', showTxt);
box1.addEventListener('mouseleave', hideTxt);
box2.addEventListener('mouseenter', showTxt2);
box2.addEventListener('mouseleave', hideTxt2);
function showTxt() {
txt1.style.display = 'block';
};
function hideTxt() {
txt1.style.display = 'none';
};
function showTxt2() {
txt2.style.display = 'block';
};
function hideTxt2() {
txt2.style.display = 'none';
};
最佳答案
像这样怎么样？
function registerHandlers(el1, el2) {
el1.addEventListener('mouseenter', function() {
el2.style.display = 'block';
});
el1.addEventListener('mouseleave', function() {
el2.style.display = 'none';
});
}
registerHandlers(document.querySelector('.text1'), document.querySelector('.box1'));
registerHandlers(document.querySelector('.text2'), document.querySelector('.box2'));
此外，如果您的 html 结构不同并且元素彼此相邻或后代，您可以在没有 js 的情况下仅使用 css 和 :hover 选择器来完成此操作。
关于javascript - 使用Javascript通过鼠标事件显示不同的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48817139/