Question

我试图在鼠标进入框时显示一个元素的内容，然后在鼠标离开时隐藏它，并在鼠标进入/离开单独的框时执行相同的操作（但内容不同）。我有它的工作，但我确信有一个更清洁的方式，任何帮助都会很棒。

<body>
<div class="boxes">
    <div class="box1">
        &nbsp;
    </div>
    <div class="box2">
        &nbsp;
    </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';
};

Answer 1

这样的事情怎么样？

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结构不同并且元素彼此相邻或是下降，那么您可以在没有仅使用css的js和:hover选择器的情况下执行此操作。

使用Javascript显示鼠标事件的不同内容

1 个答案: