Change element of another class in HTML : <p>I'm studying HTML, PHP, CSS, Javascript and MySQL and in a particular project I'm having a problem trying to change the property of a class using hover. Here is an example:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: blue;
  background-image: url("../images/background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}

body.back-row-toggle .rain.back-row {
  display: block;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}

.stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.splat {
  width: 15px;
  height: 10px;
  border-top: 2px dotted rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: splat 0.5s linear infinite;
  display: none;
}

body.splat-toggle .splat {
  display: block;
}

@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.loginp {
  position: relative;
  top: 45%;
  margin: 0 auto;
  width: 6.25%;
  margin: 0 auto;
}

.login,
.pwr {
  position: relative;
  z-index: 3;
  height: 25px;
  color: white;
  border: none;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 1s;
}

label.ll,
label.lp {
  top: 23px;
  left: 5px;
  position: relative;
  color: #9eb2c8;
  z-index: 2;
  transition: 1s;
}

input.login:focus~label.ll {
  color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;title&gt;Tela de Login&lt;/title&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;/head&gt;

&lt;body onload="makeItRain()" class="back-row-toggle splat-toggle"&gt;
  &lt;div class="rain front-row"&gt;&lt;/div&gt;
  &lt;div class="rain back-row"&gt;&lt;/div&gt;

  &lt;div class="loginp"&gt;
    &lt;label class="ll"&gt;Login&lt;/label&gt;
    &lt;input class="login" type="text" name="login" placeholder="" /&gt;
    &lt;label class="lp"&gt;Senha&lt;/label&gt;
    &lt;input class="pwr" type="password" name="senha" placeholder="" /&gt;
    &lt;div&gt;

&lt;script&gt; 

var makeItRain = function() {

  $('.rain').empty();

  var increment = 0;
  var drops = "";
  var backDrops = "";

  while (increment &lt; 100) {
    var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));

    var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));

    increment += randoFiver;

    drops += '&lt;div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"&gt;&lt;div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"&gt;&lt;/div&gt;&lt;div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"&gt;&lt;/div&gt;&lt;/div&gt;';
    backDrops += '&lt;div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"&gt;&lt;div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"&gt;&lt;/div&gt;&lt;div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"&gt;&lt;/div&gt;&lt;/div&gt;';
  }

  $('.rain.front-row').append(drops);
  $('.rain.back-row').append(backDrops);
}

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>The function on CSS </p>

<p><code>input.login:focus ~ label.ll {
  color: red;
}</code></p>

<p>My goal is that when the user passes the mouse over the <code>&lt;input class="login"&gt;</code> something to happen with <code>&lt;label class="ll"&gt;</code> label but I can not make it happen, where am I going wrong?</p>
