使用CSS选择器调用Javascript

我正在运行这个mousemove面具，它是基于一个令人兴奋的代码笔构建的，但是有一个主要的缺陷我不知道如何解决。我试着自己解决它，但我不能让它工作，我想有人比我多一点知识，可以很容易地解决这个问题

问题是，代码准备用于一个没有其他内容的“空”站点。然而，由于我只想在我的网站的一部分上使用它，所以我需要javascript只在这个特定元素上工作。如您所见，页面上使用了遮罩，因此，只要将光标移动到HTML之外的部分，并带有标题/背景图像，就会显示黑色空间。我已经尝试给HTML容器一个CSS-ID（“HTML容器”），以便仅当鼠标进入/悬停此元素时才执行javascript，例如：

//jQuery
$（“#html容器”）。悬停(
功能（事件）{
//鼠标已进入元素，可以通过“this”引用元素
},
功能（事件）{
//鼠标已离开元素，可以通过“this”引用元素
}
);在我看来，您想要的东西大致如下：

以下是我所做的：

我去掉了乘法div的乘法掩码，因为据我所知它是不必要的

然后我向所有需要掩码的元素添加了一个类，我添加了一个虚拟类
.t

然后我将
$（document）.mousemove（函数（e）.
更改为
$（.t”）.mousemove（函数（e）.

保持上述内容不变，以获得您想要的功能（基于注释），但其余步骤仍然保留。尝试一下，看看您更喜欢什么效果

然后我删除了所有的

标签。我不是一个粉丝，他们在一定程度上干扰了掩蔽

然后添加了以下CSS：

.projects{
填充：15px0；
}
.项目：不是（.t）{
背景色：白色；
z指数：99；
}

这将使所有
.t
元素位于遮罩圈的前面，并使它们的z索引变大

有些是相当肮脏的，但我认为它至少会给你指明正确的方向

另外，顺便说一句，我要记住您希望支持哪些浏览器：

CSS掩码的支持非常少，尽管它可能很酷，而且我们可能需要它们。请尝试将
$（document）.mousemove（函数（e）{…
更改为
$（“#html容器”）。mousemove（函数（e）{…
@CristianC.谢谢你的回复！我已经尝试过了。如果我在容器外悬停，它不会去除遮罩，而是停止用光标移动它。这看起来已经比当前状态好多了！非常感谢！但是，鼠标移动现在只在“b1-b6项目”上方悬停时才起作用-元素。如果我将鼠标悬停在“html容器”内的其他位置，它将停止移动，这是我不希望的。我用另一个div包装了所有div，并将mousemove函数从“.t”更改为“#html容器”但它的行为与开始时完全相同。更新了答案。我认为这就是您要查找的内容。显示在底部导航项上的两个黑色条是因为它们不跨整个页面，因此即使它们位于圆上方，它仍会执行其应做的操作。您可以添加一个跨who的包含元素我真的很感谢你的帮助！我在页脚的社交导航栏中添加了一个白色背景。但这并没有消除下面的黑色空间（请参阅此处的视频：）。正如你所看到的，那里实际上没有空间，它是在页面上最后一个元素下方移动光标时从掩码生成的（观看滚动条）为了阻止圆圈向下移动太远，你可以为它添加一个最大滚动距离。这是我的建议。是的，类似的。玩一玩它，如果你需要进一步的帮助，请随意问另一个问题。我认为这段对话已经结束，它与所问问题相关。我们不想在评论栏中垃圾邮件我也是。