Jquery 在距离div一定距离内悬停时触发代码

我为此绞尽脑汁

我想在距离div悬停时触发一些代码，例如，我想写一些类似

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

查看我的网站，了解我想要实现的目标

---

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

将您的div包装在另一个div中，该div的宽度为100px且更高，并且具有满足您需要的onMouseOver事件。

将您的div包装在另一个div中，该div的宽度为100px且更高，并且具有满足您需要的onMouseOver事件。

任何人的最终代码竖立

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

/=Jay。在Showreel之前创建div。
$（文档）.ready（函数（）{
元（“.videopress”）。在（“”）之前；
});
var-boxWidth=$（'.videopress对象'）.width（）；
//=杰伊。Showreel熄灯
$（文档）.ready（函数（）{
$（“.new”）.hover（函数（）{
$（this.next（）.removeClass（'videopress'）；
$（'.videopress'）。制作动画（{opacity:0}，1000）；
//（下图）由于某些原因，铬需要单独的特异性，不能连锁这些。
$（'.videopress object'）.css（'width'，'0px'）；
$（'html'）.animate（{backgroundColor:“black”}，1000）；
$（'nav'）.animate（{opacity:0}，1000）；
$（'header'）.animate（{opacity:0}，1000）；
$（'#showreel h1'）。设置动画（{opacity:0}，1000）；
}，函数（）{//Showreel灯亮起
$（this.next（）.addClass（'videopress'）；
//（下图）由于某些原因，铬需要单独的特异性，不能连锁这些。
$（'.videopress object'）.css（'width'，boxWidth）；
$（'.videopress'）。制作动画（{opacity:100}，1000）；
$（'html'）.animate（{backgroundColor:“white”}，500）；
$（'nav'）。设置动画（{opacity:100}，500）；
$（'header'）.animate（{opacity:100}，500）；
$（'#showreelh1'）。设置动画（{opacity:100}，500）；
});
});

所有感兴趣的人的最终代码

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

/=Jay。在Showreel之前创建div。
$（文档）.ready（函数（）{
元（“.videopress”）。在（“”）之前；
});
var-boxWidth=$（'.videopress对象'）.width（）；
//=杰伊。Showreel熄灯
$（文档）.ready（函数（）{
$（“.new”）.hover（函数（）{
$（this.next（）.removeClass（'videopress'）；
$（'.videopress'）。制作动画（{opacity:0}，1000）；
//（下图）由于某些原因，铬需要单独的特异性，不能连锁这些。
$（'.videopress object'）.css（'width'，'0px'）；
$（'html'）.animate（{backgroundColor:“black”}，1000）；
$（'nav'）.animate（{opacity:0}，1000）；
$（'header'）.animate（{opacity:0}，1000）；
$（'#showreel h1'）。设置动画（{opacity:0}，1000）；
}，函数（）{//Showreel灯亮起
$（this.next（）.addClass（'videopress'）；
//（下图）由于某些原因，铬需要单独的特异性，不能连锁这些。
$（'.videopress object'）.css（'width'，boxWidth）；
$（'.videopress'）。制作动画（{opacity:100}，1000）；
$（'html'）.animate（{backgroundColor:“white”}，500）；
$（'nav'）。设置动画（{opacity:100}，500）；
$（'header'）.animate（{opacity:100}，500）；
$（'#showreelh1'）。设置动画（{opacity:100}，500）；
});
});

你的问题更像是悬浮在“X”px（）内吗？你的问题更像是悬浮在“X”px（）内吗？这绝对是最直截了当的方法，如果你认为这似乎让我走上了正确的轨道的话。试着在我的网站上再看一次，有一个黑色的div，上面有一个“new”类，我用.wrap（）包装了视频但是你知道当我悬停时如何在div中选择视频吗，例如$（“.new”）.hover（函数（）{$（'.new'>视频类在这个类中）…我确信这是显而易见的，但我是一个jQuery新手抱歉。如果你认为这是正确的话，那么这绝对是最直接的方法。请再次尝试在我的网站上查看，有一个黑色的div，其中包含一类“new”，我已使用.wrap（）对视频进行了包装但是你知道当我在div中悬停时如何选择视频吗，例如$（“.new”）。悬停（函数（）{$（'.new'>视频类在此中）…我确信这是显而易见的，但我是一个jQuery新手对不起。