我正在尝试制作这个悬停动画，但它不起作用

Question

我使用this website作为源来学习如何制作悬停动画。

这是我的HTML：

.navLinks {
  font-family: 'Raleway';
  font-size: .9em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
}

.navLinks:hover {
  color: #000;
  /* border-left: 1px solid white;
  border-right: 1px solid white;
  padding: .5em .5em; */
}

.navLinks:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navLinks:hover: {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<nav class="container">
  <div class="menu1">
    <a href="#home" class="navLinks">Home</a>
  </div>

  <div class="menu2 ">
    <a href="#upcoming" class="navLinks">Upcoming Tournaments</a>
  </div>

  <div class="logo">
    <p>It's Academic</p>
  </div>

  <div class="menu3">
    <a href="#history" class="navLinks">History</a>
  </div>
  <div class="menu4">
    <a href="#faq" class="navLinks">Contact Info</a>
  </div>

</nav>

我只输入了与动画有关的代码。 所以我不确定为什么这不起作用但是当我悬停时没有动画。

Answer 1

您还可以更改悬停动画的颜色吗？例如：

.navLinks:hover {
   color:red;
}

也许悬停动画可以正常运行，但由于你没有改变任何东西，你无法看到它（默认情况下，你的文字是黑色的）。

Answer 2

你需要将链接放在另一个元素中才能工作！就像我提供的示例一样，您应该修改以前的问题而不是发布新问题。

＆＃13;

＆＃13;

div > a {
    position: relative;
    color: #000;
    text-decoration: none;
}

div > a:hover {
  color: #000;
}

div > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

div > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

＆＃13;

<nav class="container">
  <div class="menu1">
    <a href="#home" class="navLinks">Home</a>
  </div>

  <div class="menu2 ">
    <a href="#upcoming" class="navLinks">Upcoming Tournaments</a>
  </div>

  <div class="logo">
    <p>It's Academic</p>
  </div>

  <div class="menu3">
    <a href="#history" class="navLinks">History</a>
  </div>
  <div class="menu4">
    <a href="#faq" class="navLinks">Contact Info</a>
  </div>

</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在CSS中定位（伪）元素时出错。 .navLinks:hover会定位.navLinks。如果您希望在.navLinks::before上悬停时定位.navLinks，请将其写为：.navLinks:hover::before。

您不需要更改有关HTML的任何内容。

  

注意：官方说，伪元素是用double ::但写的：   也有效。我使用双冒号，但不要担心使用单打！

＆＃13;

＆＃13;

.navLinks {
  font-family: 'Raleway';
  font-size: .9em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
}

.navLinks:hover {
  color: #000;
  /*   border-left: 1px solid white;
  border-right: 1px solid white;
  padding: .5em .5em; */
}

.navLinks::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navLinks:hover::before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

＆＃13;

<nav class="container">
  <div class="menu1">
    <a href="#home" class="navLinks">Home</a>
  </div>

  <div class="menu2 ">
    <a href="#upcoming" class="navLinks">Upcoming Tournaments</a>
  </div>

  <div class="logo">
    <p>It's Academic</p>
  </div>

  <div class="menu3">
    <a href="#history" class="navLinks">History</a>
  </div>
  <div class="menu4">
    <a href="#faq" class="navLinks">Contact Info</a>
  </div>

</nav>

＆＃13;

＆＃13;

＆＃13;