使用 jQuery 的指针事件功能？答案

【问题标题】：Pointer events functionality using jQuery?使用 jQuery 的指针事件功能？
【发布时间】：2013-09-04 07:02:45
【问题描述】：

我正在尝试使用 jQuery 重新创建指针事件功能，因为指针事件在 IE 和 Opera 上不起作用。

我有一个 div，当悬停时，另一个 div 会显示在其上方，并且具有指针事件至关重要，因此当上方的 div 悬停时，动画不会触发：

知道如何在 jQuery 中做到这一点吗？我尝试了一些东西（如 removeClass、mouseout 等）但无法到达那里：

jQuery（尝试）：

$(".soc1").hover(function(){ $(".soc1").removeClass("t1") });

HTML：

<div class="soc1"><a href="#" target="_blank" class="soc1"><span class="t1">link</span></a></div>

CSS：

.soc1 a:hover > .t1{
    margin-top:-30px;
    opacity:1;
}

.t1{
    position:absolute;
    font-style:normal;
    letter-spacing:0px;
    display:block;
    padding:4px;
    font-family:Verdana, sans-serif;
    font-size:10px;
    color:#fff;
    background-color:#090909;
    opacity:0;
    margin-left:2px;
    margin-top:-40px;
    pointer-events:none;
    cursor:default;
}

【问题讨论】：

A link to mozilla's documentation for those who don't know what pointer-events is; 相关问题：How to make Internet Explorer emulate pointer-events:none?
看看这篇对你的问题有很好答案的帖子：stackoverflow.com/questions/5855135/…

标签： jquery css html hover pointer-events

【解决方案1】：

jQuery的.hover需要两个功能：第一个是鼠标进入（悬停），第二个是鼠标离开（停止悬停）

$(".soc1").hover(function mouseEnters() {
    $(".soc1").removeClass("t1");
}, function mouseLeaves() {
    $(".soc1").addClass("t1");
});

注意：名称“mouseEnters”和“mouseLeaves”是可选的。这些是“命名的匿名函数”。我认为为了在堆栈跟踪中清晰起见，在匿名函数上有名称很好，但许多人更喜欢不命名它们。

【讨论】：