我有一个按钮，但是当我将鼠标悬停在它上面时，文本不想更改颜色(颜色更改类---- .active:hover)。出于某种奇怪的原因，它不想改变。另外，正如您在我的代码中看到的，我想将文本颜色更改为 #fff(白色)。我经常使用 :hover 选择器，但我不知道问题出在哪里!
body {
font-family: "Exo 2", sans-serif;
margin: 0;
padding: 0;
justify-content: center;
height: 100vh;
align-items: center;
}
.active {
text-decoration: none;
color: #000;
position: relative;
padding: 8px 30px;
background: #fff;
text-transform: uppercase;
font-size: 15px;
box-sizing: border-box;
transition: 0.5s;
border: 2px solid #000;
}
.active:before {
content: '' ;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #000;
z-index: 1;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: left;
}
.active:hover {
color: #fff;
}
.active:hover:before {
transform: scaleX(1);
transition: transform 0.5s;
transform-origin: right;
}
.active:after {
content: '' ;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #000;
z-index: 1;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: right;
}
.active:hover:after {
transform: scaleX(1);
transition: transform 0.5s;
transform-origin: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a class="active" href="#">Login</a>
</body>
</html>最佳答案
您正在放置您的 :before带有 z-index 的文本元素值(value)。
根据您拥有的所有变体，包括按钮的背景，我建议您使用 <span>对于文本并使用更高的 z-index在那个元素上:
body {
font-family: sans-serif;
margin: 30px;
text-align: center;
}
.active {
text-decoration: none;
color: #000;
position: relative;
padding: 8px 30px;
background: #fff;
font-size: 15px;
transition: 0.5s;
border: 2px solid #000;
}
.active span {
position: relative;
transition: color .3s linear;
z-index: 2
}
.active:before,
.active:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #000;
z-index: 1;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: left;
}
.active:after {
left: auto;
right: 0;
transform-origin: right;
}
.active:hover span {
color: #fff;
}
.active:hover:before,
.active:hover:after {
transform: scaleX(1);
transition: transform 0.5s;
}<a class="active" href="#"><span>LOGIN</span></a>关于html - 当我将鼠标悬停在按钮上时，为什么我的按钮不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54818219/