Question

如何检查光标是否在jquery或js中悬停。

我尝试了$('#id').is(':hover')，但这似乎根本不起作用。

我必须提一下，我在hover()函数中调用此行可能是问题吗？

这是我的代码：

$(document).ready(function() { 

    /* On hover function, over the menu items */
    $('nav ul li').hover(function(){
        $('nav ul li').css("background-color", "");
        $('#append').css("background-color", "");
        $(this).css("background-color", "#9999FF"); 
        $('#append').css("background-color", "#9999FF"); 

        var append;
        if($('#menu-item-12')) {
            append = 'news';
        }else if($('#menu-item-9:hover')) {
            append = 'account';
        }else if($('#menu-item-11').is(':hover')) {
            append = 'check out';
        }
        $('#appendp').empty();
        $('#appendp').append(document.createTextNode(append));

    });

希望有人能告诉我什么是错的。

这里是jsfiddle链接，我尽我所能:) https://jsfiddle.net/xsv325ef/

Answer 1

一种很好的方法是将相关文本存储到Object文字中并根据悬停的元素ID调用文本：

<强> fiddle demo

$(function() { // DOM ready shorthand ;)

    var $appendEl = $('#appendp');
    var id2text = {
        "menu-item-12" : "unlock this crap",
        "menu-item-9"  : "check your gdmn account",
        "menu-item-11" : "check the hell out"
    };

    $('nav ul li').hover(function(){
        $appendEl.text( id2text[this.id] );
    });

});

关于颜色......使用CSS :hover

Answer 2

您只需要检查悬停的项目是否具有此ID。

像这样：https://jsfiddle.net/hrskgxz5/5/

 if(this.id === 'menu-item-11') {
     append = 'check out';
     alert('hovered');
 }

Answer 3

 $('li').hover(function(){
      $(this).css("background-color", "#9999FF");          
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 4

你应该注意到jQuery .hover()函数需要2个处理函数，在这里你只提供一个。在这里查看official documentation。

在您的情况下，您可以使用.mouseover()在其上添加一个类，然后在css文件中设置您的样式。（Document here）

例如：

$(document.ready(function(){
  $('nav ul li').mouseover(function() {
    $(this).addClass('active');
  });
});

如果您确实需要切换该元素的类，则悬停函数应如下所示：

$(document.ready(function(){
  $('nav ul li').hover(function() {
    // Stuff to do when the mouse enters the element
    $(this).addClass('active');

    // Other styles you want to do here
    // ...

  }, function() {
    // Stuff to do when the mouse leaves the element
    $(this).removeClass('active');

    // Other styles you want to remove here
    // ...

  });
});

编辑：

正如我发现的那样，jQuery .hover()函数DO接受单个处理程序。在这种情况下，你必须让课程在里面切换：

$(document.ready(function(){
  $('nav ul li').hover(function() {
    // Stuff to do when the mouse enters the element
    $(this).toggleClass('active');

  });
});

检查元素是否在jQuery中悬停

4 个答案:

编辑：