title: How to change the div style when you move the mouse over another element in another div?
body: <p>I'm working on my personal project and i need to change div style which is my cursor (from width and height 10px to width and height 100px) when i'm hovering it on h1 element inside another div.</p>
  
  <p>I tried </p>
  
  <pre><code>h1:hover ~ .cursor{
    width: 100px;
    height: 100px;
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>h1:hover + .cursor{
    width: 100px;
    height: 100px;
  }
  </code></pre>
  
  <p>but it didn't work in this case. Do you know how to do it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="mainHeader"&gt;
          &lt;h1&gt;WELCOME&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;div class="cursor"&gt;&lt;/div&gt;
  
      &lt;script src="js/cursor.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,800&amp;display=swap');
  
  *, html{
      margin: 0;
      font-family: 'Montserrat', sans-serif;
      cursor: none;
  }
  
  .mainHeader{
      background: rgb(255, 255, 255);
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }
  
  h1{
      color: rgb(255, 255, 255), 255);
      font-weight: 800;
  }
  
  .cursor{
      width: 10px;
      height: 10px;
      background: rgb(255, 255, 255);
      position: absolute;
      border-radius: 50%;
      box-sizing: border-box;
      pointer-events: none;
      transition: 200ms ease-out;
      mix-blend-mode: difference;
  }
  
  h1:hover ~ .cursor{
      width: 100px;
      height: 100px;
  }
  </code></pre>
  
  <p>here is my js code responsible for following div with the mouse:</p>
  
  <pre><code>const cursor = document.querySelector('.cursor');
  
  document.addEventListener('mousemove', e =&gt; {
      cursor.setAttribute("style", "top: " + (e.pageY - 5) + "px; left: " + (e.pageX - 5) + "px;");
  });
  </code></pre>
  
  <p>The cursor works because when I changed the code so that the "~" works, everything was ok. 
  I'm open to solutions in javascript.</p>
  
  <p>Codepen version: <a href="https://codepen.io/Flayy/pen/vYBwzgE" rel="nofollow noreferrer">https://codepen.io/Flayy/pen/vYBwzgE</a></p>