Javascript 他们的方法更简单吗？

必须有一种更简单、整洁的方法来做到这一点。你们知道我会如何做到这一点，而不编辑每一个鞋和文字

//Shoe1
const shoe1 = document.querySelector('.shoe-7');
const text1 = document.querySelector('.vans');

shoe1.addEventListener('mouseenter', () =>{
    text1.style.top = '280px';
    text1.style.opacity = '1';
});
shoe1.addEventListener('mouseleave', () =>{
    text1.style.top = '271px';
    text1.style.opacity = '0';
});

//Shoe2
const shoe2 = document.querySelector('.shoe-3');
const text2 = document.querySelector('.af1');

shoe2.addEventListener('mouseenter', () =>{
    text2.style.top = '280px';
    text2.style.opacity = '1';
});
shoe2.addEventListener('mouseleave', () =>{
    text2.style.top = '271px';
    text2.style.opacity = '0';
});

//Shoe3
const shoe3 = document.querySelector('.shoe-4');
const text3 = document.querySelector('.cortez');

shoe3.addEventListener('mouseenter', () =>{
    text3.style.top = '550px';
    text3.style.opacity = '1';
});
shoe3.addEventListener('mouseleave', () =>{
    text3.style.top = '530px';
    text3.style.opacity = '0';
});
//Shoe4
const shoe4 = document.querySelector('.shoe-5');
const text4 = document.querySelector('.gucci');

shoe4.addEventListener('mouseenter', () =>{
    text4.style.top = '550px';
    text4.style.opacity = '1';
});
shoe4.addEventListener('mouseleave', () =>{
    text4.style.top = '530px';
    text4.style.opacity = '0';
});
//Shoe5
const shoe5 = document.querySelector('.shoe-6');
const text5 = document.querySelector('.vans-2');

shoe5.addEventListener('mouseenter', () =>{
    text5.style.top = '780px';
    text5.style.opacity = '1';
});
shoe5.addEventListener('mouseleave', () =>{
    text5.style.top = '760px';
    text5.style.opacity = '0';
});
//Shoe6
const shoe6 = document.querySelector('.shoe-2');
const text6 = document.querySelector('.running');

shoe6.addEventListener('mouseenter', () =>{
    text6.style.top = '790px';
    text6.style.opacity = '1';
});
shoe6.addEventListener('mouseleave', () =>{
    text6.style.top = '780px';
    text6.style.opacity = '0';
});

---

基本查询选择器，用于获取所有元素，这些元素具有一些常见的特性和一个简单的循环

var elems=document.querySelectorAll（“[data toggles]”）；
元素forEach（元素=>{
var-toggleleem=document.querySelector（elem.dataset.toggles）；
元素addEventListener（“鼠标指针”，函数（）{
togglelem.classList.add（“活动”）；
});
元素addEventListener（“mouseleave”，函数（）{
togglelem.classList.remove（“活动”）；
});
});
.foo{display:none；}
.foo.active{display:block；}
Show 1
一个
表演2
两个
展示3
三个
queryselector调用一个公共类。一个循环什么是HTML？可能甚至不需要Javascript，这取决于HTML案例