我一直在绞尽脑汁。
我希望在距离div内时触发一些代码,例如我想写点像......
$("div").hoverwithin100px(function() {...
查看我的网站,了解我正在努力实现的目标......
http://www.jaygeorge.co.uk/gwennan-sage/showreel/
我有一个“昏暗的灯光”效果在当前正在悬停的视频上运行,但第二个你将鼠标移到div之外,效果被禁用。我想扩展悬停字段但仍然使用(这个)选择器,以便我可以隐藏未播放的视频。
答案 0 :(得分:4)
将你的div包含在另一个 div中,这个div是100px更宽更高,并且有一个onMouseOver事件可以做你想要的。
答案 1 :(得分:1)
任何有兴趣的人的最终代码......
//=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);
});
});