我如何通过 Jquery 使用鼠标事件

Question

我正在尝试在添加幻灯片功能的聊天中配置用户列表像这样的 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down 类似facebook，当鼠标悬停时，聊天容器慢慢隐藏

我在项目中使用 jquery-1.8.1.min.js 并拥有带 ID 的主体容器，我可以配置这些事件，例如

$("mainContainer").someEvent(function () {
code...
}

我可以使用点击，但是当我把光标放在里面时我没有鼠标事件。

我需要 .mousedown()、.mouseleave()、.mousemove()、hover() 等。我需要使用另一个库 JS 吗？

我想要这样的东西，认为绿色框是聊天中用户列表的容器

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("div").mouseenter(function(){
        $("div").animate({        
            width: '+=100px'
        });
    });
  $("div").mouseout(function(){
        $("div").animate({        
            width: '-=100px'
        });
    });
});
</script> 
</head>
<body>
<div style="background:#98bf21;height:100px;width:50px;position:fixed;right:0px;">
User1<br/>
User2<br/>
User3<br/>
User4<br/>
</div>
</body>
</html>

Answer 1

JQuery 有基于鼠标的事件。参见 here。

请参阅此 fiddle，我在其中调整了 w3schools 示例以适用于 mouseenter 和 mouseleave

Answer 2

勾选http://api.jquery.com/on/

你可以这样做：

$("body").on({
    click: function() {
        //...
    }
    mouseleave: function() {
    //...
    },
    //other event, etc
}, "#yourthing");

Answer 3

您可以试试这个，也可以根据需要使用任何其他鼠标事件：

$("#mainContainer").on('hover', function(){
      $(selector).slideDown("slow");
  }), function(){
      $(selector).slideUp("slow");
  });

Answer 4

也许是这样的？鼠标悬停效果可能不需要任何 JavaScript。

#mainConatiner {
  width: 300px;
  height: 30px;
  border: 1px solid #000;
}
ul {
  opacity: 0;
  transition: opacity 250ms ease;
}
#mainContainer:hover ul {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainContainer">
  Hover me!
  <ul>
    <li>User 1</li>
    <li>User 2</li>
  </ul>
</div>

如果有帮助请告诉我！祝你好运。

Answer 5

您可以像这样使用它，为多个事件调用相同的函数：

$("mainContainer").on('click mouseenter',function (event) {
    //This gives you what event happened, might be 'click' or 'mouseenter'
    var type = event.type;     
});

我如何通过 Jquery 使用鼠标事件

How I can use mouse events with Jquery

javascript

jquery

mouseevent