html – 当我将鼠标悬停在它上面时,为什么我的按钮不起作用？_html-js-css

概述我有一个按钮但是当我将鼠标悬停在它上面时,文本不想改变颜色(颜色变化类—- .active：悬停).由于一些奇怪的原因,它不想改变.另外,正如您在我的代码中看到的,我想将文本颜色更改为#fff(白色).我经常使用：悬停选择器,我不知道问题是什么！ body { font-family: "Exo 2", sans-serif; margin: 0; padding: 0; just 我有一个按钮但是当我将鼠标悬停在它上面时,文本不想改变颜色(颜色变化类—- .active：悬停).由于一些奇怪的原因,它不想改变.另外,正如您在我的代码中看到的,我想将文本颜色更改为#fff(白色).我经常使用：悬停选择器,我不知道问题是什么！

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  href="#">Login</a>       </body></HTML>

解决方法您将元素放在具有该z-index值的文本之前.
基于您拥有的所有变体,还包括按钮的背景,我建议您使用< 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;}