Css hoverIntent使用悬停元素的id更改类

我正在尝试使用显示内容，但不为每个id写入特定条件。我希望在“设置”中将id传递给鼠标，以便通过向id+'-x'添加字符来显示所选内容

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

有没有我应该做的父母、孩子的事情？我真的不明白，但我觉得这是一个有帮助的情况

<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>

触发器1
触发2
隐藏子弹1
隐藏子弹2
$（文档）.ready（函数（）{
$（“#id first div”）.hoverIntent（幻灯片右键设置）；
$（“#id second div”）.hoverIntent（幻灯片右键设置）；
});
var幻灯片\u右\u设置={
敏感度：4，
间隔时间：1500，
超时：5000，
结束：穆塞因·特里格，
输出：鼠标输出触发器
};  
函数mousein_triger（）{
var id=this.id；//我很确定我在这里出错了
$（id+'-x'）。addClass（'reveal'）；
$（id+'-x'）。removeClass（'hide'）；
}
函数mouseout\u触发器（）{
$（id+'-x'）.addClass（'hide'）；
$（id+'-x'）。removeClass（'reveal'）；
}

---

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

放置

var id=this.id函数外部

//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');                
}