mouseenter 相关问题

有关设置,订阅或处理mouseenter事件的问题。

如何组合选择/取消选择 mouseenter 事件并在悬停效果上显示图像?

如何组合选择/取消选择 mouseenter 事件并以列表格式在悬停效果上显示图像?我可以让每个功能独立工作,但不能一起工作。 我正在尝试显示

回答 1 投票 0

对于此悬停用例,我应该使用 CSS 还是 Javascript?

我正在构建一个网站,其中容器内有图像。我希望能够将鼠标悬停在容器上,并且图像会向上移动 40 像素左右。在这种情况下我需要使用 Javascript 还是

回答 1 投票 0

如何在 mouseenter 上更改不同的 div?

我在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>

回答 2 投票 0

为 MouseEnter 和 MouseLeave 制作一个函数

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

回答 2 投票 0

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

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

回答 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() })

回答 0 投票 0

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

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

回答 1 投票 0

我的鼠标功能有问题

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

回答 1 投票 0

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

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

回答 2 投票 1

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

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

回答 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', ...

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 4 投票 3

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

如下:(鼠标悬停)---------------- |标签01 |标签02 ------------------------------- |标签01-有效| | | | ...

回答 1 投票 0

如何AFRAME的当前版本处理“鼠标”事件?

AFRAME似乎已经改变了它处理的鼠标事件不改变文档的方式。你能帮我引发的mouseenter和鼠标离开事件?我的代码是在这里,在故障运行...

回答 1 投票 0

如何写MVVM WPF(C#)这些特定行?

。 Console.WriteLine(DateTime.Now.ToLongTimeString());字符串名称=(发送者作为按钮)请将.Name;我有以下两行MVVM。下面是我的代码转换。 ViewModel.cs:...

回答 2 投票 3

JS:触摸等效于mouseenter

有没有相当于mouseenter的触摸。我想检测用户是否在我的DIV上滑动。我更喜欢直接取决于目标元素的解决方案而不是父元素上的重新计算...

回答 2 投票 12

如何在mouseenter事件后定位特定元素?

我有这个JS:$(“。play”)。mouseenter(function(){$(“。gllitch-img”)。mgGlitch({// set'true'停止插件destroy:false,// set'假'停止故障......

回答 2 投票 2

选择2 - 使用事件mouseenter获取值

我正在使用带有5个optgroup的Select2如何通过将事件鼠标中心悬停在每个项目上来获取“值”(id)? $('body')。on(“mouseenter”,“。select2-results__option”,function(e){console ....

回答 1 投票 0

在子元素上反应onMouseEnter事件触发

我将onMouseEnter事件分配给父元素,但子元素是使用此事件触发的元素。当我在控制台上写e.target时,会打印出孩子。我怎么能防止这个......

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.