CSS: селектор на кнопке не работает - PullRequest
Новая
       0

CSS: селектор на кнопке не работает

0 голосов
/ 07 марта 2020

Я пытаюсь заставить кнопку иметь эффект затухания (изменить границу и цвет текста), но селектор наведения просто не работает. Я пытался исправить это в течение часа безрезультатно. 

body {
  margin: 0;
  background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #999;
}

html {
  width: 100%;
  height: 100%;
}

.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
  color: #66d8ed;
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}
<script defer src="script.js"></script>

<a class="fadebutton" href="www.google.com">Change color</a>

Ответы [ 3 ]

0 голосов
/ 07 марта 2020

Если вы хотите, чтобы текст кнопки также затухал, вы также можете добавить переход к этому свойству. Поэтому вместо

transition: border-color 0.4s ease-in;

вы также можете иметь: 

transition: border-color 0.4s ease-in;
transition: color 0.4s ease-in;

См. Демонстрацию ниже: 

body {
  margin: 0;
  background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #999;
}

html {
  width: 100%;
  height: 100%;
}

.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.4s ease-out;  
  transition: color 0.4s ease-out;
}

.fadebutton:hover{
  color: #66d8ed;  
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}

.fadebutton:hover *{
  transition: color 0.4s ease-in;
}
<script defer src="script.js"></script>

<a class="fadebutton" href="www.google.com">Change color</a>
0 голосов
/ 07 марта 2020

Я бы просто объявил переход все в классе .fadebutton, затем в .fadebutton: hover, .fadebutton: active. Я бы объявил об изменениях, которые я хотел бы сделать, как показано ниже. 

    .fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: all 0.3s ease-in;
}

.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
}

Если вы хотели, чтобы 2 свойства вели себя по-разному, я бы указывал переходы независимо друг от друга, как это. 

       .fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: color 0.3s ease-in;
transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
}
0 голосов
/ 07 марта 2020

Вам просто нужно изменить цвет фона тела, чтобы ваша кнопка появлялась, когда селектор наведения работает нормально, проблема только с цветом! Попробуйте этот код и измените его в соответствии со своими потребностями, надеюсь, я помог. 

   body {
  margin: 0;
 background-color:black;
  background-size: cover;
  background-repeat: no-repeat;
}

html {
  width: 100%;
  height: 100%;
}
.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  background-color:white;
  color: black;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
  color: #66d8ed;
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kell</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<a class="fadebutton" href="www.google.com">Change color</a>
</body>
</html>
...