使用 CSS 选择器调用 Javascript

Question

我正在我的页面上运行这个鼠标移动掩码，我基于切除代码笔构建，但有一个我不知道如何解决的主要缺陷。我试图自己修复它，但我无法让它工作，我想比我知识多一点的人可以轻松解决这个问题。

问题是，代码准备到一个没有其他内容的"空"站点。但是，由于我只想在网站的一部分上使用它，因此我需要 javascript 只处理这个特定的元素。如您所见，蒙版用于孔页面，因此一旦您将光标移动到带有标题/背景图像的 HTML 之外的部分，就会只显示黑色空间。我已经尝试过并给 HTML 容器一个 CSS-ID("html-container")，以便仅在鼠标进入/悬停此元素时才执行 javascript，例如：

// jQuery
$("#html-container").hover(
function(event) {
// The mouse has entered the element, can reference the element via 'this'
},
function (event) {
// The mouse has left the element, can reference the element via 'this'
}
);

我想这是正确的方法，但我不知道如何修改代码以使其工作。这是现有代码。希望有人能够帮助我解决这个问题，我将非常感谢任何帮助。

jQuery(document).ready(function($) {
var timer;
var mouseX = 0,
mouseY = 0;
var xp = 0,
yp = 0;
var circle = $("#circle");
function mouseStopped() {
circle.removeClass('moving');
}
$(document).mousemove(function(e) {
circle.addClass('moving');
mouseX = e.pageX - 300;
mouseY = e.pageY - 300;
clearTimeout(timer);
timer = setTimeout(mouseStopped, 3000);
});
var loop = setInterval(function() {
xp += ((mouseX - xp) / 6);
yp += ((mouseY - yp) / 6);
circle.css({
left: xp + 'px',
top: yp + 'px'
}); // 
}, 30);
});
onScroll = function (e){
var maxScroll=860
if(e.target.scrolltop>maxScrollTop){
e.target.scrolltop=maxScrollTop
}
}
$(function() {
$('.b1').hover(function() {
$('.animated-bg').css('background-image', 'url(https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Extenssa_Header_Color_03.jpg)');
});
$('.b2').hover(function() {
$('.animated-bg').css('background-image', 'url(https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Lurch_Muesli_Foodfotografie_6.jpg)');
});
$('.b3').hover(function() {
$('.animated-bg').css('background-image', 'url(https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Burger_Amniente_Messe_Bluestudios_Hannover.jpg)');
});
$('.b4').hover(function() {
$('.animated-bg').css('background-image', 'url(https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Food_Fotografie_Jante_Hannover_2-1.jpg)');
});
$('.b5').hover(function() {
$('.animated-bg').css('background-image', 'url(https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/01/Startseite_Intern_MTU_Header_2500px_Bluestudios.jpg)');
});
$('.b6').hover(function() {
$('.animated-bg').css('background-image', 'url(https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/AZNAURI_Fashion_Foto_BlueStudios1.jpg)');
});
});
var images = [];
function preload() {
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preload(
"https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Extenssa_Header_Color_03.jpg",
"https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Lurch_Muesli_Foodfotografie_6.jpg",
"https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Burger_Amniente_Messe_Bluestudios_Hannover.jpg",
"https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/Food_Fotografie_Jante_Hannover_2-1.jpg",
"https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/01/Startseite_Intern_MTU_Header_2500px_Bluestudios.jpg",
"https://bluestudiosdesign.hostpress.me/wp-content/uploads/2019/03/AZNAURI_Fashion_Foto_BlueStudios1.jpg"
)

body,
html {
overflow-x: hidden;
}
.projects {
padding: 15px 0;
}
.projects:not(.t) {
background-color: white;
z-index: 99;
}
.notice {
text-align: center;
left: 50%;
bottom: 50%;
}
h1,
p,
a {
font-family: 'memphian_ltbold';
color: #000;
margin: 0;
text-decoration: none;
transition: color 0.3s ease-in-out;
-webkit-transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-out;
}
h1 {
text-transform: uppercase;
font-size: 4em;
}
p {
font-size: 1em;
}
.full-size {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.blend-multiply {
mix-blend-mode: multiply;
}
.blend-screen {
mix-blend-mode: screen;
}
.mask-bg-color {
background-color: white;
}
.animated-bg {
background: white;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.element-mask {
background-color: #fff;
}
.circle-follow {
position: absolute;
overflow: hidden;
background-color: #000000;
width: 600px;
height: 600px;
top: calc( 50% - 300px);
left: calc( 50% - 300px);
-webkit-border-radius: 300px;
border-radius: 300px;
-webkit-transition: opacity 0.3s cubic-bezier(0.52, 0.01, 0.16, 1);
transition: opacity 0.3s cubic-bezier(0.52, 0.01, 0.16, 1);
opacity: 0;
}
.circle-follow.moving {
opacity: 1;
}
/* hack to detect ie11 and above - blend mode not supported */
_:-ms-fullscreen,
:root .letter-mask {
background-color: transparent;
}
_:-ms-fullscreen,
:root .animated-bg {
opacity: 0.2;
}
_:-ms-fullscreen,
:root .circle-follow {
background-color: #ffffff;
opacity: 0.2;
}
.projects a {
position: relative;
color: #000;
text-decoration: none;
}
.projects a:hover {
color: #000;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.projects a:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.projects a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper full-size">
<div class="mask-bg-color full-size">
</div>
<div class="full-size">
<div class="animated-bg full-size">
</div>
<div class="blend-screen element-mask full-size">
<span id="circle" class="circle-follow">
			</span>
</div>
</div>
</div>
<div class="notice">
<div class="t b1 projects">
<h1><a href="#">Kältech</a></h1>
</div>
<div class="t b2 projects">
<h1><a href="#">Aznauri</a></h1>
</div>
<div class="t b3 projects">
<h1><a href="#">Troester</a></h1>
</div>
<div class="t b4 projects">
<h1><a href="#">Uniroyal</a></h1>
</div>
<div class="t b5 projects">
<h1><a href="#">Taube und Goerz</a></h1>
</div>
<div class="b6 projects">
<h1><a href="#">Montblanc</a></h1>
</div>
<div class="b7 projects">
<h1><a href="#">Lurch</a></h1>
</div>
<div class="b8 projects">
<h1><a href="#">B-Eat</a></h1>
</div>
<div class="b9 projects">
<h1><a href="#">Extensa</a></h1>
</div>
<div class="b10 projects">
<h1><a href="#">Roomimage</a></h1>
</div>
</div>

Answer 1

在我看来，你想要这样的东西： https://jsfiddle.net/vh4607qo/

这是我所做的：

我从乘法

1. div 中删除了乘法掩码，因为据我所知，它是不需要的。

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

3. 然后我把$(document).mousemove(function(e)...改成了$(".t").mousemove(function(e)...

保持上述相同以获得您想要的功能(基于注释)，但其余步骤仍然存在。玩一玩，看看你更喜欢什么效果。https://jsfiddle.net/b9e3vopL/

4. 然后我删除了所有<br>标签。我不是粉丝，他们在一定程度上干扰了掩蔽。

5. 然后添加了以下 CSS：

.projects {
padding: 15px 0;
}
.projects:not(.t) {
background-color: white;
z-index: 99;
}

这会将所有.t元素带到遮罩圆的前面，并使它们的 z 索引更大。

其中一些很脏，但我认为它至少会为你指明正确的方向。

另外，顺便说一句，我会记住您想要支持的浏览器：https://caniuse.com/#search=masks

CSS掩码的支持很少，尽管它可能很酷，而且我们想要它们。