使用CSS选择器调用Javascript

Question

我正在运行这个mousemove-mask on my page，我建立在一个令人兴奋的codepen上，但有一个主要的缺陷，我不知道如何地址。我试图自己解决这个问题，但是我无法让它工作，我猜想只有比我更多知识的人才能轻松解决这个问题。

问题是，代码准备好了一个没有其他内容的“空”站点。但是，因为我想在我的网站的一部分上使用它，我需要javascript只能在这个特定的元素上工作。如您所见，在孔页面上使用蒙版，因此只要将光标移动到带有标题/背景图像的HTML外部的部分，就会显示黑色空间。我已经尝试过给HTML-container一个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几乎没有什么支持，尽管它可能很酷，而且我们可能想要它们。