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

Question

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

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

我应该做 parent 、 child 的事情吗？我真的不明白，但觉得这是它会有所帮助的情况。

<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

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

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