I am currently learning HTML, PHP, CSS, Javascript and MySQL as part of a project. I am facing an issue while attempting 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>Login Screen</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">Password</label>
<input class="pwr" type="password" name="password" 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 CSS code snippet for the hover effect is:
input.login:focus ~ label.ll {
color: red;
}My objective is to have something happen with the <label class="ll"> when a user hovers over the <input class="login">, but I am encountering difficulties implementing this feature. Where could I be going wrong?