blocks|key|1952741|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1952742|var+hovered+=+$("#parent").find("#element:hover").length;|code-block|syntax|javascript|1952743|jQuery+1.9%2B|1952744|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Use:

<pre><code>var hovered = $("#parent").find("#element:hover").length;
</code></pre>

jQuery 1.9+

blocks|key|1739368|text|它在jQuery+1.9中不起作用。根据user2444818的回答制作了这个插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1739369|jQuery.fn.mouseIsOver+=+function+()+{
++++return+$(this).parent().find($(this).selector+%2B+":hover").length+>+0;
};+|code-block|syntax|javascript|1739370|http://jsfiddle.net/Wp2v4/1/|offset|length|1739371|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

It does not work in jQuery 1.9. Made this plugin based on user2444818's answer.

<pre><code>jQuery.fn.mouseIsOver = function () {
 return $(this).parent().find($(this).selector + ":hover").length &gt; 0;
}; 
</code></pre>

<a href="http://jsfiddle.net/Wp2v4/1/" rel="noreferrer">http://jsfiddle.net/Wp2v4/1/</a>

blocks|key|1739455|text|在JQuery+2.x上，接受的答案对我不起作用。每次调用.is(":hover")都返回false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1739456|我最终得到了一个非常简单的有效的解决方案：|1739457|function+isHovered(selector)+{

++++return+$(selector%2B":hover").length+>+0

}|code-block|syntax|javascript|1739458|entityMap^0|T|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

The accepted answer didn't work for me on JQuery 2.x
<code>.is(":hover")</code> returns false on every call.

I ended up with a pretty simple solution that works:

<pre><code>function isHovered(selector) {

 return $(selector+":hover").length &gt; 0

}
</code></pre>

blocks|key|1739210|text|在悬停时设置标志：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1739211|var+over+=+false;
$('#elem').hover(function()+{
++over+=+true;
},
function+()+{
++over+=+false;
});|code-block|syntax|javascript|1739212|那就检查一下你的旗帜。|1739213|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Set a flag on hover:

<pre><code>var over = false;
$('#elem').hover(function() {
 over = true;
},
function () {
 over = false;
});
</code></pre>

Then just check your flag.

blocks|key|1952847|text|您可以从所有悬停的元素中过滤您的元素。有问题的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1952848|element.filter(':hover')|code-block|syntax|javascript|1952849|保存代码：|1952850|jQuery(':hover').filter(element)|1952851|要返回布尔值，请执行以下操作：|1952852|jQuery(':hover').filter(element).length===0|1952853|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can filter your elment from all hovered elements.
Problematic code:

<pre><code>element.filter(':hover')
</code></pre>

Save code:

<pre><code>jQuery(':hover').filter(element)
</code></pre>

To return boolean:

<pre><code>jQuery(':hover').filter(element).length===0
</code></pre>

blocks|key|1739253|text|在@穆罕默德的回答上进行了扩展。您可以使用一些封装|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1739254|如下所示：|1739255|jQuery.fn.mouseIsOver+=+function+()+{
++++if($(this[0]).is(":hover"))
++++{
++++++++return+true;
++++}
++++return+false;
};+|code-block|syntax|javascript|1739256|像这样使用它：|1739257|$("#elem").mouseIsOver();//returns+true+or+false|1739258|分叉小提琴：http://jsfiddle.net/cgWdF/1/|offset|length|1739259|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/cgWdF/1/^0|0|0|0|0|0|6|S|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Expanding on @Mohamed's answer. You could use a little encapsulation

Like this:

<pre><code>jQuery.fn.mouseIsOver = function () {
 if($(this[0]).is(":hover"))
 {
 return true;
 }
 return false;
}; 
</code></pre>

Use it like: 

<pre><code>$("#elem").mouseIsOver();//returns true or false
</code></pre>

Forked the fiddle:
<a href="http://jsfiddle.net/cgWdF/1/" rel="nofollow noreferrer">http://jsfiddle.net/cgWdF/1/</a>

blocks|key|1739397|text|我喜欢第一个回答，但对我来说很奇怪。当试图在鼠标加载页面后进行检查时，我必须设置至少500毫秒的延迟才能使其工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1739398|$(window).on('load',+function()+{
++++setTimeout(function()+{
++++++++$('img:hover').fadeOut().fadeIn();
++++},+500);
});|code-block|syntax|javascript|1739399|http://codepen.io/molokoloco/pen/Grvkx/|offset|length|1739400|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

I like the first response, but for me it's weird. When attempting to check just after page load for the mouse, I have to put in at least a 500 millisecond delay for it to work:

<pre><code>$(window).on('load', function() {
 setTimeout(function() {
 $('img:hover').fadeOut().fadeIn();
 }, 500);
});
</code></pre>

<a href="http://codepen.io/molokoloco/pen/Grvkx/" rel="nofollow">http://codepen.io/molokoloco/pen/Grvkx/</a>

blocks|key|1739301|text|为每个kinakuta的答案设置一个标志似乎是合理的，你可以在身体上放置一个监听器，这样你就可以检查在特定时刻是否有任何元素被悬停在上面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1739302|但是，您希望如何处理子节点呢？您可能应该检查元素是否是当前悬停元素的祖先。|1739303|<script>

var+isOver+=+(function()+{
++var+overElement;
++return+{

++++//+Set+the+"over"+element
++++set:+function(e)+{
++++++overElement+=+e.target+%7C%7C+e.srcElement;
++++},

++++//+Return+the+current+"over"+element
++++get:+function()+{
++++++return+overElement;++++
++++},

++++//+Check+if+element+is+the+current+"over"+element
++++check:+function(element)+{
++++++return+element+==+overElement;
++++},

++++//+Check+if+element+is,+or+an+ancestor+of,+the+
++++//+current+"over"+element
++++checkAll:+function(element)+{
++++++while+(overElement.parentNode)+{
+++++++++if+(element+==+overElement)+return+true;
+++++++++overElement+=+overElement.parentNode;
++++++}
++++++return+false;
++++}
++};
}());


//+Check+every+second+if+p0+is+being+hovered+over
window.setInterval(+function()+{
++var+el+=+document.getElementById('p0');
++document.getElementById('msg').innerHTML+=+isOver.checkAll(el);
},+1000);


</script>

<body+onmouseover="isOver.set(event);">
++<div>Here+is+a+div
++++<p+id="p0">Here+is+a+p+in+the+div+here+is+a+span+in+the+p+foo+bar+
++</div>
++<div+id="msg"></div>
</body>|code-block|syntax|javascript|1739304|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Setting a flag per kinakuta's answer seems reasonable, you can put a listener on the body so you can check if any element is being hovered over at a particular instant.

However, how do you want to deal with child nodes? You should perhaps check if the element is an ancestor of the currently hovered element.

<pre><code>&lt;script&gt;

var isOver = (function() {
 var overElement;
 return {

 // Set the "over" element
 set: function(e) {
 overElement = e.target || e.srcElement;
 },

 // Return the current "over" element
 get: function() {
 return overElement; 
 },

 // Check if element is the current "over" element
 check: function(element) {
 return element == overElement;
 },

 // Check if element is, or an ancestor of, the 
 // current "over" element
 checkAll: function(element) {
 while (overElement.parentNode) {
 if (element == overElement) return true;
 overElement = overElement.parentNode;
 }
 return false;
 }
 };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
 var el = document.getElementById('p0');
 document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


&lt;/script&gt;

&lt;body onmouseover="isOver.set(event);"&gt;
 &lt;div&gt;Here is a div
 &lt;p id="p0"&gt;Here is a p in the div&lt;span&gt; here is a span in the p&lt;/span&gt; foo bar &lt;/p&gt;
 &lt;/div&gt;
 &lt;div id="msg"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

blocks|key|1952885|text|https://api.jquery.com/hover/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1952886|第38行中的异步函数：|1952887|$(+".class#id"+).hover(function()+{
++Your+javascript
});|code-block|syntax|javascript|1952888|entityMap|0|LINK|mutability|MUTABLE|url^0|0|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<a href="https://api.jquery.com/hover/" rel="nofollow noreferrer">https://api.jquery.com/hover/</a>
Asynchronous function in line 38:
<pre><code>$( &quot;.class#id&quot; ).hover(function() {
 Your javascript
});
</code></pre>

I'm not looking for an action to call when hovering, but instead a way to tell if an element is being hovered over currently. For instance:

<pre><code>$('#elem').mouseIsOver(); // returns true or false
</code></pre>

Is there a jQuery method that accomplishes this?

Detect IF hovering over element with jQuery

jQuery

我不是在寻找一个在悬停时调用的动作，而是寻找一种方法来判断元素当前是否被悬停在上面。例如：$('#elem').mouseIsOver(); // returns true or false有没有jQuery方法可以做到这一点呢？

问使用jQuery检测是否悬停在元素上
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery检测是否悬停在元素上EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery检测是否悬停在元素上
EN