更改HTML中另一个类的元素

时间:2018-07-21 22:21:30

标签: javascript html css

我正在研究HTML,PHP,CSS,Javascript和MySQL,在一个特定的项目中,尝试使用悬停更改类的属性时遇到了问题。这是一个示例:

def unique_factors(all_factors):
  [ [a,b] for [a,b] in all_factors if a <= b ]
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;
}

CSS上的功能

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

我的目标是,当用户将鼠标移到input.login:focus ~ label.ll { color: red; }标签上时,会发生带有<input class="login">标签的事情,但我无法实现,这是哪里出了问题?

1 个答案:

答案 0 :(得分:0)

两个问题:

  1. 您正在使用:focus,它会在单击输入元素且当前处于活动状态时激活(即,它的光标闪烁),但是您要求输入“当用户通过鼠标时结束”,即:hover

  2. 您正在使用通用的同级组合器(~)来匹配元素label.ll,但是您只能使用该函数来匹配第一个元素之后的元素。在您的DOM中,.ll元素位于.login元素之前。

:hover状态移动到父元素可能是一个更好的主意:

.login-wrapper:hover label {
  color: red;
}
<div class="login-wrapper">
  <label for="login">Login</label> <input id="login" />
</div>