我正在研究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">
标签的事情,但我无法实现,这是哪里出了问题?
答案 0 :(得分:0)
两个问题:
您正在使用:focus
,它会在单击输入元素且当前处于活动状态时激活(即,它的光标闪烁),但是您要求输入“当用户通过鼠标时结束”,即:hover
。
您正在使用通用的同级组合器(~
)来匹配元素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>