Change element of another class in HTML

Question

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:

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;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Tela de Login</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body onload="makeItRain()" class="back-row-toggle splat-toggle">
  <div class="rain front-row"></div>
  <div class="rain back-row"></div>

  <div class="loginp">
    <label class="ll">Login</label>
    <input class="login" type="text" name="login" placeholder="" />
    <label class="lp">Senha</label>
    <input class="pwr" type="password" name="senha" placeholder="" />
    <div>

<script> 

var makeItRain = function() {

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

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

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

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

    increment += randoFiver;

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

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

</script>
</body>
</html>

The function on CSS

input.login:focus ~ label.ll { color: red; }

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

score 0 · Accepted Answer · answered Jul 21 '18 at 22:27

0

Two problems:

You're using :focus, which activates when an input element is clicked on and currently active (i.e. it has a blinking cursor), but you're asking for "when the user passes the mouse over", which is :hover.
You're using the general sibling combinator (~) to match the element label.ll, but you can only use that function to match elements that follow after the first one. In your DOM, the .ll element comes before the .login element.

Moving your :hover state to a parent element might be a better idea:

.login-wrapper:hover label {
  color: red;
}

<div class="login-wrapper">
  <label for="login">Login</label> <input id="login" />
</div>

answered Jul 21 '18 at 22:27

Jon Uleis

17,693
2
33
42

Thanks! It worked! But what if I want to use `:focus`? I just tried replacing `:hover` with ´:focus´ and it did not work = ( – Diego Lincoln Jul 22 '18 at 00:34
`:focus` works on `input` elements, so you can't use it on `div`. Since `input` elements cannot have children and CSS cannot affect previous siblings, you could only have it affect a sibling that came after (again, using the `~` selector). – Jon Uleis Jul 22 '18 at 00:37
I did! Thanks!!!!! – Diego Lincoln Jul 22 '18 at 00:38

Change element of another class in HTML

1 Answers1