css - hoverIntent 使用悬停元素的 id 来更改类

Question

我正在尝试使用hoverIntent来显示内容，而无需为每个 ID 编写特定条件。我想在设置中将 id 传递给鼠标，这样我就可以通过向 id +'-x' 添加字符来显示选择的内容。

我尝试了几种方法来获取我悬停的 div，但这些方法通常最终会返回所有带有“box”类的 div 的所有信息。

有没有我应该做的父母，孩子的事情？我真的不明白，但觉得这是它会有所帮助的情况。

<div id="id-first-div" class="box">Trigger 1</div>
<div id="id-second-div" class="box">Trigger 2</div>

<div id="id-second-div-x" class="hide">Hidden Bullet 1</div>
<div id="id-first-div-x" class="hide">Hidden Bullet 2</div>

<script>
$(document).ready(function() {
    $("#id-first-div").hoverIntent(slide_right_settings);
    $("#id-second-div").hoverIntent(slide_right_settings);
});

var slide_right_settings={
    sensitivity: 4,
    interval: 1500,
    timeout: 5000,
    over: mousein_triger,
    out: mouseout_triger
};  

function mousein_triger(){
    var id = this.id; // I'm pretty sure I'm going wrong here 
    $(id + '-x').addClass('reveal');
    $(id + '-x').removeClass('hide');
}

function mouseout_triger() {
    $(id +'-x').addClass('hide');
    $(id +'-x').removeClass('reveal');
    }
</script>

Answer 1

把函数放在var id = this.id;外面

Answer 2

//hover intent opening and closing
var slide_right_settings={
    over: mousein_triger,
    out: mouseout_triger
};  

//default id is home
var id = "home";

function mousein_triger(){
//updates id to the one triggering
    id = $(this).attr('id');
    $('#' + id + '-x').addClass('reveal');
    $('#' + id + '-x').removeClass('hide');
}

function mouseout_triger() {
    $('#' + id +'-x').addClass('hide');
    $('#' + id +'-x').removeClass('reveal');                
}

仍然不确定这是否是实现这一目标的最佳方法，但它正在工作..我相信它可以改进很多。