觸發代碼當在一個div的特定距離內徘徊時

我想觸發一些代碼時，懸停在距離一個div例如我想寫類似...

$("div").hoverwithin100px(function() {...

看看我的網站爲我想要實現的想法...

http://www.jaygeorge.co.uk/gwennan-sage/showreel/

我有一種「昏暗的燈光'效果在當前正在播放的視頻上運行，但第二個將鼠標移動到div之外時，該效果被禁用。我想擴展懸停字段，但仍然使用（this）選擇器，以便我可以隱藏視頻那是不是玩

來源

2011-03-17 SparrwHawk

是你的問題更像hoverwithin「X」 PX（） – 2011-03-17 17:28:33

把你的div 另一個 div是100px寬和更高，並有一個onMouseOver事件，做你想做的。

來源

2011-03-17 17:27:25 tpdi

這絕對是最直接的方式做到這一點，如果你能 – ctcherry 2011-03-17 17:28:47

這似乎讓我走上正軌。嘗試在我的網站上再次查看，有一個黑色的div與'新'，我已經使用.wrap（）包裹視頻的類。但是你知道在懸停時如何選擇div內的視頻嗎？（）。（「。new」）。hover（function（）{（'。new'> video class in this）..... 我確信這是顯而易見的，但我是一個jQuery新手對不起。 – SparrwHawk 2011-03-17 18:09:23

現在解決了，謝謝！ – SparrwHawk 2011-03-17 20:41:25

興趣的人最終代碼...

//=Jay. Create div before Showreel. 
$(document).ready(function(){ 
    $('.videopress').before("<div class='new'></div>"); 
}); 

var boxWidth = $('.videopress object').width(); 

//=Jay. Showreel Lights Out 
$(document).ready(function(){ 
    $(".new").hover(function() { 
     $(this).next().removeClass('videopress'); 
     $('.videopress').animate({opacity: 0}, 1000); 
     //(Below) Chrome requires separate specificity for some reason, cannot chain these. 
     $('.videopress object').css('width', '0px'); 
     $('html').animate({backgroundColor: "black" }, 1000); 
     $('nav').animate({opacity: 0}, 1000); 
     $('header').animate({opacity: 0}, 1000); 
     $('#showreel h1').animate({opacity: 0}, 1000); 
    },function() { //Showreel Lights on 
     $(this).next().addClass('videopress'); 
     //(Below) Chrome requires separate specificity for some reason, cannot chain these. 
     $('.videopress object').css('width', boxWidth); 
     $('.videopress').animate({opacity: 100}, 1000); 
     $('html').animate({ backgroundColor: "white" }, 500); 
     $('nav').animate({opacity: 100}, 500); 
     $('header').animate({opacity: 100}, 500); 
     $('#showreel h1').animate({opacity: 100}, 500); 
    }); 
});

來源

2011-03-17 21:07:39 SparrwHawk

觸發代碼當在一個div的特定距離內徘徊時

回答

相關問題