使用 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 幾乎沒有支持，盡管它可能很酷，但我們可能想要它們。