如何检查悬停的id

How to check what id is hovering

本文关键字：悬停 id 检查 何检查      更新时间：2023-09-26

我在页面上有ID，比如：

<div id="1"><div id="inner-1" style="display:none;"></div></div>
<div id="2"><div id="inner-2" style="display:none;"></div></div>
<div id="3"><div id="inner-3" style="display:none;"></div></div>

然后，我有js来切换悬停父id的可见性：

var toggleAuthor = function(id) {
    jQuery('#inner-'+id).fadeIn();
};
var toggleAuthorOff = function(id) {
    jQuery('#inner-'+id).delay(1000).fadeOut();
};

所以问题是如何将悬停id发送到那里，我想我必须将悬停id分配给var并发送它，类似于

var aid = 38;
jQuery(aid).hover(function() {
    toggleAuthor(aid);
}, function() {
    toggleAuthorOff(aid);
});

但是如何只获得徘徊的id？

提前谢谢。

为所有这些添加一个类，比如"tester"：

<div id="container">
    <div id="1" class="tester"><div id="inner-1" style="display:none;"></div></div>
    <div id="2" class="tester"><div id="inner-2" style="display:none;"></div></div>
    <div id="3" class="tester"><div id="inner-3" style="display:none;"></div></div>
</div>

然后使用以下jQuery：

$('#container').on('mouseenter','.tester',function() {
    toggleAuthor(this.id);
}).on('mouseleave','.tester',function(){
    toggleAuthorOff(this.id);
});

这是一个正在工作的jsFiddle

您也可以使用css类而不是ID:

<div id="container">
    <div id="1" class="outer"><div id="inner-1" class="inner"></div></div>
    <div id="2" class="outer"><div id="inner-2" class="inner"></div></div>
    <div id="3" class="outer"><div id="inner-3" class="inner"></div></div>
</div>

使用css def:

.inner { display: none; }

和js:

$(".outer").mouseenter ( function () { $(this).find(".inner").fadeIn();});
$(".outer").mouseleave ( function () { $(this).find(".inner").delay(1000).fadeOut();});

我建议这样做：

<div class="check" id="1">1<div id="inner-1" style="display:none;"></div></div>
<div class="check"  id="2">2<div id="inner-2" style="display:none;"></div></div>
<div class="check" id="3">3<div id="inner-3" style="display:none;"></div></div>

JS:

$(function()
  {
         $(".check").mouseenter ( function (e) { alert(e.currentTarget.id) });
  });

演示

相关文章：