IDごとに特定の条件を書かずに、 hoverIntentを使ってコンテンツを公開しようとしています。id + '-x' に文字を追加して選択したコンテンツを表示できるように、設定で id をマウスに渡したいと思います。
ホバリングしている div を取得する方法をいくつか試しましたが、これらは通常、クラス「ボックス」を持つすべての 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>