mouseenter 相关问题

我在div中有一系列div。 HTML：我有 6 套，如下所示：我的div中有一系列div。 HTML：我有 6 套这样的： <div class="example" id="example1"> <div class="note"> <div class="backgr_color"></div> <div class="note_text"> <h2>Text</h2> <h3>Text</h3> <div class="note_comment"> <p>Text</p> </div> <div class="note_bottom"> <p>text</p> </div> </div> </div> </div> “note”div 是正方形，“backgr_color”div 是正方形内的小点。当我鼠标输入相应的“note”div 时，我想更改“backgr_color”点的大小和颜色。如何使用 querySelectorAll 而不是 getElementById 6 次来做到这一点？我知道我应该迭代这两个集合并找到相应的 div (note[2] = backgr_color[2]) 但我不知道该怎么做？我还不了解 JQuery，所以如果 JS 有解决方案，那就太好了！我理解如何迭代notes_animation（注释）并影响注释本身，但我不明白如何找到相应的backgr_color点？ let notes_animation = document.querySelectorAll(".note"); let backgr_color = document.querySelectorAll(".backgr_color"); for (i = 0; i < notes_animation.length; i++) { notes_animation[i].addEventListener('mouseenter', function () { this.style.backgroundColor = "red"; }); } JS 不是合适的工具。 CSS 是一种更好的方法，因为它旨在设置 UI 属性，并且也是硬件加速的，因此比 JS 基于事件的模型性能更好。您可以使用 :hover 伪选择器来实现您的目标： .note { width: 200px; height: 200px; position: relative; background-color: #C00; } .note:hover .backgr_color { background-color: #FFF; } .note .backgr_color { width: 20px; height: 20px; background-color: #000; position: absolute; top: 90px; left: 90px; } <div class="example" id="example1"> <div class="note"> <div class="backgr_color"></div> <div class="note_text"> <h2>Text</h2> <h3>Text</h3> <div class="note_comment"> <p>Text</p> </div> <div class="note_bottom"> <p>text</p> </div> </div> </div> </div> <div class="example" id="example1"> <div class="note"> <div class="backgr_color"></div> <div class="note_text"> <h2>Text</h2> <h3>Text</h3> <div class="note_comment"> <p>Text</p> </div> <div class="note_bottom"> <p>text</p> </div> </div> </div> </div> 如果您真的想使用JS执行此操作，那么您可以将事件挂接到循环中的所有.note元素，然后使用querySelector()在引发事件的.backgr_color中查找.note元素: const toggleNoteClass = e => e.target.querySelector('.backgr_color').classList.toggle('hover'); document.querySelectorAll('.note').forEach(note => { note.addEventListener('mouseenter', toggleNoteClass); note.addEventListener('mouseleave', toggleNoteClass); }); .note { width: 200px; height: 200px; position: relative; background-color: #C00; } .note .backgr_color { width: 20px; height: 20px; background-color: #000; position: absolute; top: 90px; left: 90px; } .note .backgr_color.hover { background-color: #FFF; } <div class="example" id="example1"> <div class="note"> <div class="backgr_color"></div> <div class="note_text"> <h2>Text</h2> <h3>Text</h3> <div class="note_comment"> <p>Text</p> </div> <div class="note_bottom"> <p>text</p> </div> </div> </div> </div> <div class="example" id="example1"> <div class="note"> <div class="backgr_color"></div> <div class="note_text"> <h2>Text</h2> <h3>Text</h3> <div class="note_comment"> <p>Text</p> </div> <div class="note_bottom"> <p>text</p> </div> </div> </div> </div> 看来你们关系很亲密。我想你会想向涉及的 html 元素之一添加/删除一个类，并通过 css 处理不同的样式。这是我建议的方法。如果您想删除 mouseleave 上的类，则必须添加另一个事件侦听器。 let notes_animation = document.querySelectorAll(".note"); let backgr_color = document.querySelectorAll(".backgr_color"); for (i = 0; i < notes_animation.length; i++) { notes_animation[i].addEventListener('mouseenter', function (event) { event.target.querySelector('.backgr_color').classList.add('foo'); }); } .note { display: flex; } .backgr_color { background-color: tomato; height: 10px; width: 10px; } .backgr_color.foo { background-color: yellow; } <div class="example" id="example1"> <div class="note"> <div class="backgr_color"></div> <div class="note_text"> <h2>Text</h2> <h3>Text</h3> <div class="note_comment"> <p>Text</p> </div> <div class="note_bottom"> <p>text</p> </div> </div> </div> </div>

javascript loops mouseenter

回答 2 投票 0

为 MouseEnter 和 MouseLeave 制作一个函数

我需要制作一个函数，当鼠标进入和离开按钮区域时显示和隐藏标签。我开始为每个按钮单独做，但是因为会有超过 5 个......

c# visual-studio function mouseenter mouseleave

回答 2 投票 0

事件处理程序即使有事件委托也无法处理动态内容

我有两个 ModalPopups 第一个打开并有一个工具提示文本，用户可以使用“mouseenter”事件侦听器查看更多详细信息。一旦用户点击关闭模态...

javascript jquery event-handling mouseenter dynamic-html

回答 1 投票 0

如何在保留 addClass 和 removeClass 的同时简化我的 Jquery 代码？

每次添加新的和元素时，我还必须在 .js 文件中添加一行新代码 Codepen 这是它如何工作的在线代码以及它应该如何继续工作... 每次添加新的 <li> 和 <img> 元素时，我还必须在 .js 文件中添加一行新代码 Codepen 这是在线代码，说明它如何工作以及在编辑脚本后应该如何继续工作。 //Mouseenter $(".list li:nth-child(1)").on('mouseenter', function() { $(".img-display img.show").removeClass("show"); $(".img-display img:nth-child(1)").addClass("show"); }) $(".list li:nth-child(2)").on('mouseenter', function() { $(".img-display img.show").removeClass("show"); $(".img-display img:nth-child(2)").addClass("show"); }) $(".list li:nth-child(3)").on('mouseenter', function() { $(".img-display img.show").removeClass("show"); $(".img-display img:nth-child(3)").addClass("show"); }) //Mouseleave $(".list li:nth-child(1)").on('mouseleave', function() { $(".img-display img.show").addClass("show"); $(".img-display img:nth-child(1)").removeClass("show"); }) $(".list li:nth-child(2)").on('mouseleave', function() { $(".img-display img.show").addClass("show"); $(".img-display img:nth-child(2)").removeClass("show"); }) $(".list li:nth-child(3)").on('mouseleave', function() { $(".img-display img.show").addClass("show"); $(".img-display img:nth-child(3)").removeClass("show"); }) 我希望能够通过保留 addClass、removeClass、mouseenter 和 mouseleave 来简化我的代码，而不必在每次添加新元素时都添加另一行代码。目前我只有这个来识别列表的元素： $(".list li").on('mouseenter', function() { var index = $(this).index() })

jquery mouseenter mouseleave

回答 0 投票 0

如何使用ID在悬停一个框架元素时调用javascript函数？

我一直在调用mouseenter上的javascript函数，像这样：document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) { alert("This is a cylinder."); }) ....

javascript hover aframe mouseenter queryselector

回答 1 投票 0

我的鼠标功能有问题

您好，如果我将鼠标悬停在<>上，请从更改背景但不更改颜色。我知道.controls有颜色，并且它比li的类颜色还多，但是如果...] >> 将此添加到您的CSS： https://codepen.io/Lukinezko/pen/qBOJEad

javascript mouseenter

回答 1 投票 0

[Angular 2+中带有参数的单元测试指令

我有一条指令，可在鼠标悬停时更改元素的背景颜色，如下所示。从'@ angular / core'导入{Directive，ElementRef，HostListener，Input}； @Directive（{选择器：'[...

angular unit-testing karma-jasmine angular2-directives mouseenter

回答 2 投票 1

CSS指针事件：允许悬停时不提供

我正在尝试创建一个top元素，我的页面可以悬浮。悬停时，我想更改元素的不透明度并允许单击。问题是当我添加指针事件时：none ...

javascript css hover mouseenter pointer-events

回答 2 投票 0

mouseenter` 2秒后如何获得morpha.start（）？

Mootools：如何在2秒钟鼠标进入后获取morpha.start（）？ window.addEvent（'domready'，function（）{var morph = new Fx.Morph（'resize'，{duration：700，delay：400}）; $$（'＃resize'）。addEvent（'mouseenter'， ...

javascript mootools mouseenter mootools-events

回答 1 投票 0

如何更改带有颜色阵列的mouseenter的背景

很难弄清楚如何使用JavaScript将3段的背景色更改为mouseenter数组中的颜色。有小费吗？这是我的数组：function changeColors（）{...

javascript mouseenter

回答 1 投票 0

带有动画的鼠标和鼠标离开

我制作了一个简单的鼠标进入和鼠标离开动画。当您输入div时。比链接div更加开放。当您将鼠标移出时，div将关闭。我用slideUp和...

javascript jquery slidedown slideup mouseenter

回答 4 投票 3

如何使用计时器创建选项卡悬停

如下：（鼠标悬停）---------------- |标签01 |标签02 ------------------------------- |标签01-有效| | | | ...