Question

我一直在绞尽脑汁。

我希望在距离div内时触发一些代码，例如我想写点像......

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

查看我的网站，了解我正在努力实现的目标......

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

我有一个“昏暗的灯光”效果在当前正在悬停的视频上运行，但第二个你将鼠标移到div之外，效果被禁用。我想扩展悬停字段但仍然使用（这个）选择器，以便我可以隐藏未播放的视频。

Answer 1

将你的div包含在另一个 div中，这个div是100px更宽更高，并且有一个onMouseOver事件可以做你想要的。

Answer 2

任何有兴趣的人的最终代码......

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

将鼠标悬停在div的特定距离内时触发代码

2 个答案: