使用 CSS 选择器调用 Javascript

Question

我在我的页面上运行这个 mousemove-mask ，我建立在一个令人兴奋的代码笔上，但有一个主要缺陷我不知道如何解决。 我试图自己修复它，但我无法让它工作，我想一个比我多一点知识的人可以轻松解决这个问题。

问题是，代码准备到一个没有其他内容的“空”站点。 但是，因为我只想在我网站的一部分上使用它，所以我需要 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-index 更大。

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

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

CSS-Masks 几乎没有支持，尽管它可能很酷，但我们可能想要它们。