Mouseenter事件触发失败
Mouseenter事件是一个鼠标事件，当鼠标指针进入指定元素时触发。它与Mouseover事件类似，但有一些区别。
Mouseenter事件只在鼠标指针从元素外部进入元素内部时触发一次，而不会在元素内部移动时重复触发。这意味着如果一个元素包含在另一个元素内部，当鼠标从外部元素进入内部元素时，只会触发内部元素的Mouseenter事件，而不会触发外部元素的Mouseenter事件。
Mouseenter事件的失败可能有以下几个原因：
- 事件绑定问题：可能没有正确地绑定Mouseenter事件的处理函数。确保在正确的元素上绑定事件，并且事件处理函数被正确调用。
- 元素层级问题：如果元素嵌套在其他元素内部，确保Mouseenter事件绑定在正确的元素上。如果鼠标进入内部元素时没有触发Mouseenter事件，可能是因为事件绑定在外部元素上。
- CSS样式问题：某些CSS样式可能会影响Mouseenter事件的触发。例如，如果元素设置了
pointer-events: none;样式，鼠标事件将不会触发。
针对Mouseenter事件触发失败的问题，可以尝试以下解决方法：
- 检查事件绑定：确保正确地绑定Mouseenter事件的处理函数，并且事件处理函数没有错误。
- 检查元素层级：确认Mouseenter事件绑定在正确的元素上，并且没有被其他元素遮挡。
- 检查CSS样式：检查元素的CSS样式，特别是与鼠标事件相关的样式，确保没有影响事件触发的问题。
如果以上方法都没有解决问题，可以尝试使用浏览器的开发者工具进行调试，查看是否有其他错误或警告信息。另外，可以查阅相关的文档和社区资源，寻找其他开发者遇到类似问题的解决方案。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关·内容
3回答
我有一个HighlightDirective，它在鼠标进入某个区域时会突出显示，比如：
@Directive({
selector: '[myHighlight]',
host: {
'(mouseenter)': 'onMouseEnter()',
'(mouseleave)': 'onMouseLeave()'
}
})
export class HighlightDirective {
private _defaultColor = 'Gainsboro';
浏览 7提问于2016-06-28得票数 5
回答已采纳
我正在使用tippy库来处理我的应用程序中的工具提示。现在，我想测试当组件悬停在元素上时，组件是否显示工具提示内容。tippy库表示工具提示是由mouseEnter或focus事件触发的。
在测试它时，我使用fireEvent.mouseEnter()事件触发工具提示。它工作得很好，可以通过。但是当我使用userEvent.hover()的时候，它就没用了。userEvent.hover() 不支持 mouserEnter 事件吗?或者帮助我理解为什么在这里不起作用。
注意：fireEvent.mouseOver()在这里不工作。
我知道tippy已经被测试过了。我只是好奇为什么它不与user
浏览 20提问于2022-11-20得票数 2
回答已采纳
1回答
在上，悬停三个彩色矩形中的任何一个都会触发jQuery代码，该代码会隐藏图像并显示一些文本。在移动设备上，我不想运行这段代码，所以我在resize()上执行代码，并且只在桌面分辨率下运行它。
但它不工作，由于某些原因，代码运行的都是大小写。
JS：
jQuery(document).ready(function($) {
vertical_hover();
$(window).on('resize', vertical_hover);
function vertical_hover() {
if ( window.innerWidt
浏览 7提问于2015-10-30得票数 0
1回答
我对以下代码有问题：
<li>
<a href="http://example.com" id="webd">
<span class="hot">W</span>eb Development
</a>
</li>
..................
<p class='web' > Web for all</p>
CSS文件：
.hover {
background: #000;
}
.hot{
浏览 0提问于2013-09-02得票数 0
回答已采纳
1回答
我有几个嵌套的div-s，当鼠标位于该元素上时，我只想标记其中一个是活动的。下面的代码并不适用于每种情况。
代码示例：Red -> container Green -> outer Yellow -> inner Blue ->active
最内部的div与鼠标应该只有蓝色的背景。
它只在很少的交互中起作用，而且大多数情况下是失败的。对于这个问题，什么是最好的、资源较少的解决方案？
function markActive($el) {
$el.addClass('active');
$el.parent().triggerHandler(&#
浏览 2提问于2016-03-11得票数 0
回答已采纳
好了，我有一个输入域，我想用2个自定义指令来增强它：
<input type="text" number-format validation-message="Only numeric values are valid!" class="form-control" id="num1" ng-model="num1" />
第一个指令在输入文本的瞬间验证所有输入，在本例中，我使用正则表达式检查数字：(这实际上工作得很好) ->
.directive('numberFormat', f
浏览 2提问于2014-07-10得票数 3
2回答
是什么导致我的动画闪烁？
、、、、
我正在做一个简单的动画，它的效果与预期一样，直到我在我的网格周围设置了一个边界。只要我这样做，然后动画闪烁时，我的鼠标单击帧。我正在尝试实现一个“滑动”到视图中的菜单。我已经在下面包含了我的代码。这几乎就像是我的鼠标点击导致了一个无限的动画循环。
<Border BorderBrush="YellowGreen" CornerRadius="8" BorderThickness="10" Background="Black">
<Grid MouseLeftButtonDown="Dra
浏览 0提问于2012-02-21得票数 1
回答已采纳
3回答
这只是一个关于悬停事件的简短问题，我如何才能在用户不悬停的情况下(以编程方式)向元素发送悬停事件。
示例：
// Send hover event
$('#myDiv').sendHoverEvent();
// What to do once hovering
$('#myDiv').hover(console.log('hovering'));
浏览 0提问于2011-06-03得票数 13
回答已采纳
我正在为azure地图库使用。我目前正在实现一个。当遵循应用于我的需求的时，我不能让代码工作。
这是我的组件：
import {Component, Input, OnInit} from '@angular/core';
import * as atlas from 'azure-maps-control';
import {ILayerEvent} from 'ng-azure-maps';
@Component({
selector: 'app-map',
templateUrl: './map.compo
浏览 20提问于2021-03-18得票数 0
我正在尝试为div元素编写一个简单的悬停效果。我看到，使用Aurelia，我可以编写如下内容：
<div mouseover.bind="myFunc()"></div>
它工作得很好，但是我需要一个mouseenter事件，但它不起作用。
<div mouseenter.bind="myFunc()"></div> // does not work
有没有添加所有javascript事件的路线图？有没有临时的解决方案来代替mouseover来获得类似于mouseenter事件的功能？
浏览 16提问于2016-09-07得票数 3
回答已采纳
我有这样的代码：
<!-- language: lang-js -->
$('#trajectory-sequence').delegate('li:not(.disabled)','mouseenter mouseleave', function( event )
{
if( event.type == 'mouseenter')
$(this).find("div:gt(0)").show();
else if(event.type=='mouselea
浏览 1提问于2012-02-23得票数 1
我使用的是带有qUnit+sinon测试框架的moo4q+jquery。
目前，为了触发点击事件，我做了以下工作：
object.jThis.click(); // simulate a click event
其中object.jThis是对象映射到的jQuery对象(包装器集)。
对我来说，问题是其他事件，如.hover()，不会像.click()一样触发事件。
这仅仅是jQuery API中的不一致吗？
编辑：
// wire up event
attach: function() {
this.jThis.hover(function(eventObj) {
浏览 2提问于2012-12-05得票数 4
回答已采纳
1回答
我有一个包含元素(h3，img，p)的div。我想使用jQuery来检测用户何时将鼠标悬停在此div上，然后切换此div中的某个元素类。
我使用的代码如下：
$('.entry').bind({
mouseover: function() {
$('.readMore').toggleClass('inverted');
},
mouseleave: function() {
$('.readMore').toggleClass('inverted');
}
});
浏览 1提问于2011-11-08得票数 5
回答已采纳
1回答
用jQuery轻推鼠标？
、、、
我在我的网站的一个页面上有一个链接，它必须使主菜单打开，就像有人在其中一个菜单项上盘旋一样。我能做到这一点没问题。
jQuery(document).ready(function($){
$('a#view-products').on('click', function(){
if ($(window).width() > 1149) {
//FOR DESKTOP
$('ul.mainmenu li.menu.heading.item122.parent.level1').mouseover();
浏览 1提问于2015-12-03得票数 0
回答已采纳
我不完全理解触发器究竟为做了什么
例如，当我们这样做时：
triggers="mouseenter:click"
这是否意味着当我们将鼠标悬停/放置在那里时，工具提示将被显示，并在单击时消失？
如果是的话，是否可以指定两个工具提示应该消失的事件。
例如，我想在悬停时显示工具提示，然后在单击它时使它消失，或者从那里移除鼠标。有什么想法吗？
浏览 1提问于2018-02-13得票数 3
回答已采纳
我将span附加到mouseover上的div，我只是想在嵌套的跨度上触发一个单击。感觉好像我什么都试过了都不走运。
我已经找到了几个类似的方法，但不幸的是它们也不起作用。
浏览 0提问于2013-06-10得票数 5
回答已采纳
1回答
超级菜单配阿尔松果酱-哈弗是巴基
、、、、
我正在尝试创建一个Mega菜单，在Hover上触发，使用尾风CSS和Al菠萝CSS。我让它起作用了，但它真的很好用。
我尝试过在不同的元素中添加x-on:mouseleave，但是它要么会不断闪烁，要么只会在离开特定区域时消失。因此，它要么在菜单下方移动时消失，而不是在上方移动时消失，反之亦然。
任何洞察力都将不胜感激！
<div class="bg-blue-800 hidden md:block">
<div class="max-w-screen-xl mx-auto">
<nav class="flex
浏览 7提问于2020-11-23得票数 0
回答已采纳
3回答
使用jquery创建自己的滑块，首先使用.list类列出从文件夹到div的图像，然后使用mouseenter显示div id #中的每个图像。但是鼠标不工作('.list img')。问题出在哪里？
html：
<html>
<head>
<meta charset="utf-8" />
<link rel='stylesheet' href='css/style.css' />
<script type="text/javascript" src="j
浏览 5提问于2015-08-13得票数 1
回答已采纳
我搜索了文档和谷歌，很难找到关于如何为ngMouseenter事件编写E2E测试的可靠参考资料。Angular的E2E测试工具有element(<selector>).click()，但据我所见，其他事件类型没有。
在我的例子中，mouseenter (和mouseleave)触发了我想要保持测试的行为，我想其他人也有类似的用例。有没有办法做到这一点？
编辑
这允许我做以下事情：
jqFunction(<selector>, "mouseenter")
而且效果很好。
浏览 3提问于2013-10-12得票数 1
我试图在移动或悬停时重定向或加载页面，下面的代码对于我正在尝试做的事情来说工作得很好，但是如果你将鼠标移动到它循环的链接上并不断重新加载页面，我如何才能阻止它在悬停在链接上时不断循环？
$(document).ready(function() {
$(".container").css("background", "");
$(".container").fadeIn(500);
$("#side-menu ul li a").hover(function(event){
eve
浏览 0提问于2011-11-08得票数 1
回答已采纳
是否可以在元素上触发hoverIntent。
我试过$(elem).trigger('hoverIntent');，但不起作用。
编辑: Js小提琴：
浏览 1提问于2012-08-07得票数 3
回答已采纳
1回答
当我翻阅一个元素(查看包含该元素的总体数据)时，以及当我重新推出所有内容时，我都会尝试得到一些东西的预览。问题是，当我快速移动鼠标光标，有时鼠标退出方法没有发生，数据保持更新，我不想那样。知道我该怎么做吗？
$(document).on("mouseover", ".checkRezolvata", function(e){
var idTemp = "";
idTemp = $(this).parent().parent().parent().attr("id");
data = {
id: idTemp,
set: 1
浏览 2提问于2014-02-11得票数 0
我需要通过事件在ListViewItem鼠标上运行代码。我尝试了几种没有对我有效的解决方案。
我想出了这个：
private void ProcessListItems()
{
foreach (var item in settings.items)
{
var i = lst.ItemContainerGenerator.ContainerFromItem(item) as ListViewItem;
if (i == null)
浏览 3提问于2021-10-17得票数 0
回答已采纳
2回答
滑鼠和滑梯离开
、、
当鼠标击中最小化的元素时，我想滑动一个div，当用户离开它时滑动它：
$('#managerpane').mouseenter(function(){
$('#managerpane').height(300).slideUp();
});
$('#managerpane').mouseleave(function () {
$('#managerpane').height(60).slideDown();
});
<div id="managerpane" style="positio
浏览 6提问于2015-04-01得票数 0
回答已采纳
如何使Jquery代码只选择主div(.post)？它也会影响到它的孩子，里面的div。
我用这个：
$(document).ready(function() {
$( ".post" )
.mouseover(function() {
$(this).animate({
height: 180,
width: 160
}, 200, function() {
// Animation complete.
});
})
.mouseou
浏览 4提问于2015-02-24得票数 0
回答已采纳
当使用上面的代码时，"mouseenter“和"mouseleave”在start时触发一次。"onmouseenter“和"onmouseleave”在预期的时候被触发。我如何让"mouseenter“和"mouseleave”在期望的时候触发？
<!DOCTYPE html>
<html>
<body>
<div id="banner" style="border: 2px solid black; height: 200px"></
浏览 1提问于2017-12-25得票数 3
假设我有一个panel，在这个panel中有一个label。我想要做的是解雇panel的MouseEnter，但是当我在label控件上做MouseEnter时，有什么想法吗？
浏览 2提问于2022-09-14得票数 0
我正在处理一个简单的jQuery函数
$( 'foo' ).hover( function () {
$( this ).children( 'bar' ).delay( 250 ).stop( true, true ).slideToggle( 200 );
})
我注意到，如果我在'foo‘元素上用鼠标加载页面，那么悬停就会相反。我在鼠标上显示，在鼠标上隐藏。
有什么好的解决办法吗？
浏览 5提问于2015-05-27得票数 0
回答已采纳
1回答
这个小片段的目标是(默认情况下)显示图像数据，然后通过"slideDown“onMouseOver删除它。它主要起作用，但是当信息显示时，如果你将鼠标悬停在文本上，div就会疯狂地上下跳跃。任何帮助解决这个问题的人都将不胜感激！
演示：
浏览 1提问于2012-10-03得票数 2
我希望在悬停div时显示其中的一些按钮。
示例
// HTML
<div id="overdiv">
<p>Move your mouse several times on this text to see the bug</p>
<input type="button" value="hello" class="elements"/>
</div>
// CSS
#overdiv {background:#CCC;border:1px solid #FFF;wid
浏览 1提问于2012-08-08得票数 0
回答已采纳
2回答
.one与回调
、、
$('#footer').one('hover', function() {
$('#impressum_lang_container').stop().slideDown('slow', function(){
$('body,html').animate({ scrollTop: $(document).height()}, 'slow');
return false;
});
});
我对javascript完全陌生，所以非常感谢
浏览 4提问于2014-01-19得票数 1
回答已采纳
下面是它的工作原理=>
1)事件(mouseenter)不应该在最新的likers框创建且仍处于打开状态时触发。2)我在最新的likers框上有一个事件(mouseleave) (而不是likes本身)。
但是当我悬停(第一次按下鼠标键)时，事件发生了很多次，每次都会重新创建最新的likers框(这不应该发生)。=>
$('.statuses_mbody').on('mouseenter',
'.status_likes, .reply_likes',function (e) {
//capture the main data
浏览 3提问于2016-09-09得票数 0
jQuery的'hover‘触发器似乎不起作用。我的代码很简单：
<div id='el'>Content</div>
// does not work
$('#el').on('hover', function() { console.log('is not triggered'); });
$('#el').trigger('hover');
// works for various strings: 'foo', 'click'
浏览 2提问于2012-10-19得票数 1
回答已采纳
jQuery鼠标中心事件不是在鼠标中触发，而是在单击时触发。
function showOverlap() {
var hits = $('.follower').collision('#slides li');
$(hits).trigger('mouseenter');
}
$('.container1').mouseenter(function() {
showOverlap();
});
$('#slides li').on('mouseenter',functi
浏览 3提问于2013-12-03得票数 0
回答已采纳
2回答
我正在创建一个示例应用程序，当用户将光标从div上移开时，我需要立即更改div的颜色。
它是有效的，但很准确，不确定我哪里错了。
请参阅下面的示例应用程序。
var cursorX = 0;
var cursorY = 0;
$(document).ready(function() {
$(".a").mouseover(function() {
animateDiv();
setInterval(function() {
isCursorOnSquare('.a')
}, 1)
浏览 0提问于2017-09-21得票数 0
我使用jQuery为页面上的元素设置悬停回调。我现在正在编写一个模块，它需要为一些元素临时设置新的悬停行为。新模块无法访问悬停函数的原始代码。
我希望在设置新的悬停函数之前存储旧的悬停函数，以便在完成临时悬停行为时可以恢复它们。
我认为可以使用jQuery.data()函数来存储这些内容：
//save old hover behavior (somehow)
$('#foo').data('oldhoverin',???)
$('#foo').data('oldhoverout',???);
//set new hover
浏览 3提问于2008-09-08得票数 5
回答已采纳
1回答
我的想法是，我想在鼠标光标位置显示FlowLayoutPanel。但是当我的代码运行时，它只会在表单的中心跳转。我要在DataGridView.CellMouseEnter事件上触发它。想要一些建议，谢谢。
Private Sub dgw_CellMouseEnter(sender As Object, e As DataGridViewCellEventArgs) Handles dgw.CellMouseEnter
FlowLayoutPane1.Location = Cursor.Position
FlowLayoutPane1.Visible = True
End Su
浏览 2提问于2013-10-24得票数 1
为什么当我将鼠标悬停在一个元素上时，onmouseover会运行多次？
当用户将鼠标悬停在图标上时，我试图运行一个简单的动画，但它运行了多次。
我在这里测试它：
不管怎样，有没有什么办法来解决这个问题？也许可以使用监听器来代替？
这是在onmouseover上运行的javascript：
function upIcon(n) {
console.log("Mouseover icon: " + n);
$('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 )
浏览 0提问于2012-02-22得票数 14
回答已采纳
我正在创建一个弹出菜单，如下所示
const menuItem = {
props: ['name', 'val'],
data() {
return {
showChild: false
}
},
template: /*html */ `
<div class="nav-item" @mouseover="showChild=true" @mouseout="showChild=false">
<span v-if=
浏览 3提问于2021-05-27得票数 0
回答已采纳
jQuery .mouseover()函数和.hover()函数有什么不同？如果它们是完全相同的，为什么jQuery会同时使用它们呢？
浏览 0提问于2013-07-11得票数 120
回答已采纳
1回答
我在JS中有这两个关于鼠标切换和鼠标退出的事件。它们是为了检查我是否在我的页面上的一个面板上徘徊。但问题是，当我悬停在面板上时，它会触发(很好)，但当我悬停在该面板内的另一个元素上时，它会触发一个mouseout事件，然后当我移动到面板中的另一个部分时，再次触发mouseover事件。
我只想让鼠标移动和鼠标操作事件只发生一次！一次是因为进入面板，另一次是因为离开了。是否有方法将调用传播到div.panel中的所有子元素。看来这会纠正它。
这是我的活动
$(document).off("mouseover").on("mouseover", "div
浏览 3提问于2017-01-14得票数 22
我试图使用jquery在另一个元素上模拟悬停。
基本上我在下面有我的幻灯片。
<div id="slideshow">
...
</div>
我把这些设置好了..。
var slider = $('#slideshow').bxSlider({
autoHover: true
})
这些设置只会在<div id="slideshow">悬停时使幻灯片播放暂停。当您滚动时，幻灯片开始播放。
我的问题是，有没有办法在<div id="slideshow">上模拟悬停动作，而
浏览 3提问于2012-12-13得票数 0
4回答
嗨，我正在试图隐藏一个鼠标进入身体的div，它没有正常工作，我试图隐藏的div，将隐藏，并再次出现。签出这个
这是我的代码：
联署材料：
$(document).mouseenter(function() {
$('.jadu').hide(10);
}).mouseout(function(){
$('.jadu').show(10);
});
HTML：
<div class="jadu"></div>
CSS：
*{padding:0px;margin:0px;}
.jadu{
pos
浏览 7提问于2014-05-17得票数 1
回答已采纳
我已经设置了一个非常简单的jQuery悬停功能，但问题是当你将鼠标悬停在触发器div上时，它会工作，但如果你将鼠标移到目标div上，同时仍然在触发器div (重叠)上，它会闪烁！？有什么想法吗？
我有这个jQuery代码：
$("#tag").hover(
function () {
$("#homeHover").show();
},
function () {
$("#homeH
浏览 0提问于2011-02-01得票数 0
1回答
我使用敲除将项目绑定到我的菜单，我使用ddsmoothmenu。但是，当页面加载时，菜单扩展了所有项目的内部，我希望它折叠所有的用户悬停。请看我的附件图片。
我的html：
<div id="smoothmenu1" class="ddsmoothmenu-v">
<ul class="item-container" data-bind="foreach: tools">
<li>
<a href="javascript:;"
浏览 0提问于2014-07-18得票数 1
回答已采纳
1回答
我一直在用“mouseenter”事件在现有的点击功能上添加一个额外的鼠标hove功能，但似乎找不到正确的公式来达到预期的效果。
原始代码：
$('.navhandle, .navcontainer, #tray-button, .page-template-template-home-php .lines, .single-portfolio .lines').hover(
function(){ $('#supersized img').addClass('resize'); //add class for css3 transiti
浏览 0提问于2012-09-07得票数 1
回答已采纳
最好的方式是在每个链接上只触发一个滚动，而不是页面上的所有滚动。请参阅：目前很明显，页面上的任何'li a‘都会触发我的翻转。我想在每个图像上有单独的翻转，只由它自己触发。希望这是有意义的。
<script type="text/javascript">
$(document).ready(function(){
$(".content #display li a .caption").hide();
$(".content #display li a").mouseenter(function(){
$(&#
浏览 0提问于2011-04-05得票数 0
1回答
我创建了函数来显示子列表从给定的列表使用鼠标输入和鼠标离开，这工作很好地显示子列表，但我需要点击(收藏图标)在子列表中，当图标被点击时，onmouseleave被触发，在图标上的点击事件也被触发，但我需要在点击时仍然显示子列表，这是我的代码
$.fn.hideListGroup = function(id){
if ($("#sub_list_group_"+id+"").is(':visible')){
$("#sub_list_group_"+id+"").slideUp('fa
浏览 18提问于2018-08-21得票数 0
我有一个函数，当具有'tooltip‘属性的元素悬停在上面时，它就会运行，如下所示……
$(".element1").hover( function() {
// Do stuff here...
}, function() {
// Do other stuff here...
});
但是，我需要将一个元素放在具有tooltip属性的元素之上，该属性阻止了悬停的工作。
当悬停在顶部元素上时，有没有办法触发悬停功能？也许是这样的东西？
$('.element2').hover(function() {
$(this).sibl
浏览 1提问于2013-06-05得票数 2
回答已采纳
在我的程序中，我使用body来委托web page.And中的所有事件，如何删除它？这是我的代码，谢谢。
jQuery(function ($) {
$("body").on("mouseenter.noteEvent", "*", function (event) {
//doSomeThing();
});
$("body").on("mouseleave.noteEvent", "*", function (event) {
//doSome
浏览 2提问于2014-03-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
