Call Javascript with CSS selector

Question

i'm running this mousemove-mask on my page which i built upon an excisting codepen but there's one major flaw i don't know how to adress. I tried to fix it myself but i can't get it to work and i guess someone with just a little bit more knowledge than me could solve this easily.

The problem is, that the code is prepared to an "empty" site with no other content. However, since i want to use it on just a part of my website, i need the javascript to work only on this specific element. As you can see, the mask is used on the hole page and therefore shows just black space as soon as you move the cursor to a part outside of the HTML with the headings/background-images. I already tried and gave the HTML-container a CSS-ID ("html-container") in order to execute the javascript only if the mouse enters/hovers this element, somethink like this e.g:

// 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'
    }
 );

I guess that's the right way to do it, but i don't know really know how to modify the code in order to make it work. This is the existing code. Hopefully someone is able to help me out with this, i'd highly appreciate any help.

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

It appears to me that you want something along the lines of this: https://jsfiddle.net/vh4607qo/

Here's what I did:

1. I removed the multiply mask off of the multiply div because it was unneeded as far as I can tell.

2. Then I added a class to all of the elements that needed the mask, I added a dummy class .t

3. Then I changed $(document).mousemove(function(e)... to $(".t").mousemove(function(e)...

Keep the above the same to get the functionality that you want (based on the comment), but the rest of the steps remain. Play around with it to see what effect you like more. https://jsfiddle.net/b9e3vopL/

4. Then I removed all of the <br> tags. I'm not a fan, and they were interfering with the masking to a degree you.

5. And then added the following CSS:

.projects {
  padding: 15px 0;
}

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

That brings all of the .t elements in front of the masking circle and also makes their z-index larger.

Some of this is pretty dirty, but I think it'll at least point you in the right direction.

Also, as an aside, I'd keep in mind what browsers you want to support: https://caniuse.com/#search=masks

CSS-Masks have very little support, as cool as it may be, and as much as we may want them.