Fügen Sie :Hover-Effekte dynamisch zu mehreren Elementen hinzu
P粉203792468
P粉203792468 2023-08-15 23:49:58
0
1
400

Ist es möglich, programmgesteuert einen Hover-Effekt hinzuzufügen? In unserem System, in dem es mehrere Elemente gibt, die eine einzelne Einheit darstellen (aber aus anderen Gründen in mehrere Elemente aufgeteilt werden müssen), sollten sie in manchen Fällen beim Schweben gemeinsam neu eingefärbt werden. Ist es möglich, programmgesteuert einen Hover-Effekt hinzuzufügen? Oder ist das eine gute Praxis?

Ich konnte dieses Problem lösen, indem ich my_own_css_class verwendet habe, um es allen Elementen beim Hover hinzuzufügen. Aber ich habe das Gefühl, dass es für mich von Vorteil sein könnte, ihnen programmgesteuert einen Hover-Effekt zu verleihen (z. B. möchte ich, dass der Hover-Effekt verschwindet, wenn die Maus sie verlässt usw.).

P粉203792468
P粉203792468

Antworte allen (1)
P粉564192131

我不确定我是否正确理解了问题,但据我所知,有两种可能的解决方案,它们都包括使用'my_own_css_class'

  1. CSS方法
元素1
元素2
元素3
.hoverable-element { /* 无 */ } .hoverable-element:hover { /* 重新着色 */ }
  1. JavaScript方法
元素1
元素2
元素3
.hoverable-element-js { /* 无 */ } .hover-effect-js { /* 重新着色 */ }
const elements = document.querySelectorAll('.hoverable-element-js'); elements.forEach(element => { element.addEventListener('mouseover', () => { element.classList.add('hover-effect-js'); }); element.addEventListener('mouseout', () => { element.classList.remove('hover-effect-js'); }); });
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!