How do I check if the mouse is over an element in jQuery?

前端 未结 24 2114
不思量自难忘°
不思量自难忘° 2020-11-22 08:10

Is there a quick & easy way to do this in jQuery that I\'m missing?

I don\'t want to use the mouseover event because I\'m already using it for something else. I

相关标签:
24条回答
  • 2020-11-22 09:13

    You can use jQuery's mouseenter and mouseleave events. You can set a flag when the mouse enters the desired area and unset the flag when it leaves the area.

    0 讨论(0)
  • 2020-11-22 09:13

    I combined ideas from this topic and came up with this, which is useful for showing/hiding a submenu:

    $("#menu_item_a").mouseenter(function(){
       clearTimeout($(this).data('timeoutId'));
       $("#submenu_a").fadeIn("fast");
    }).mouseleave(function(){
       var menu_item = $(this);
    
       var timeoutId = setTimeout(function(){
          if($('#submenu_a').is(':hover'))
          {
            clearTimeout(menu_item.data('timeoutId'));
          }
          else
          {
            $("#submenu_a").fadeOut("fast");
          }
       }, 650);
    
        menu_item.data('timeoutId', timeoutId); 
    });
    
     $("#submenu_a").mouseleave(function(){
       $(this).fadeOut("fast");
     });
    

    Seems to work for me. Hope this helps someone.

    EDIT: Now realizing this approach is not working correctly in IE.

    0 讨论(0)
  • 2020-11-22 09:13

    You can use is(':visible'); in jquery And for $('.item:hover') it is working in Jquery also.

    this is a htm code snnipet :

        <li class="item-109 deeper parent">
    <a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
    <ul>
    <li class="item-110 noAff">
    <a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
    <span>Tsdi</span>
    </a>
    </li>
    <li class="item-111 noAff">
    <a class="item" href="/Comsopolis/index.php/matiers/reseaux">
    <span>Réseaux</span>
    </a>
    </li>
    </ul>
    </li>
    

    and this is the JS Code :

    $('.menutop > li').hover(function() {//,.menutop li ul
    
        $(this).find('ul').show('fast');
    
    },function() {
        if($(this).find('ul').is(':hover'))
        $(this).hide('fast');
    
    });
    
     $('.root + ul').mouseleave(function() {
        if($(this).is(':visible'))
        $(this).hide('fast');
    
    });
    

    this what i was talking about :)

    0 讨论(0)
  • 2020-11-22 09:15

    I needed something exactly as this (in a little more complex environment and the solution with a lot of 'mouseenters' and 'mouseleaves' wasnt working properly) so i created a little jquery plugin that adds the method ismouseover. It has worked pretty well so far.

    //jQuery ismouseover  method
    (function($){ 
        $.mlp = {x:0,y:0}; // Mouse Last Position
        function documentHandler(){
            var $current = this === document ? $(this) : $(this).contents();
            $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
            $current.find("iframe").load(documentHandler);
        }
        $(documentHandler);
        $.fn.ismouseover = function(overThis) {  
            var result = false;
            this.eq(0).each(function() {  
                    var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                    var offset = $current.offset();             
                    result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                                offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
            });  
            return result;
        };  
    })(jQuery);
    

    Then in any place of the document yo call it like this and it returns true or false:

    $("#player").ismouseover()
    

    I tested it on IE7+, Chrome 1+ and Firefox 4 and is working properly.

    0 讨论(0)
  • 2020-11-22 09:15

    JUST FYI for future finders of this.

    I made a jQuery plugin that can do this and a lot more. In my plugin, to get all elements the cursor is currently hovered over, simply do the following:

    $.cursor("isHover"); // will return jQ object of all elements the cursor is 
                         // currently over & doesn't require timer
    

    As I mentioned, it also has alot of other uses as you can see in the jsFiddle found here

    0 讨论(0)
  • 2020-11-22 09:17

    I took SLaks' idea and wrapped it in a small class.

    function HoverWatcher(selector){
      this.hovering = false;
      var self = this; 
    
      this.isHoveringOver = function() { 
        return self.hovering; 
      } 
    
        $(selector).hover(function() { 
          self.hovering = true; 
        }, function() { 
          self.hovering = false; 
        }) 
    } 
    
    var box1Watcher = new HoverWatcher('#box1');
    var box2Watcher = new HoverWatcher('#box2');
    
    
    
    $('#container').click(function() {
      alert("box1.hover = " + box1Watcher.isHoveringOver() +
            ", box2.hover = " + box2Watcher.isHoveringOver());
    });
    
    0 讨论(0)
提交回复
热议问题