无法让 CSS 悬停动画工作

Posted 2023-03-06

【中文标题】无法让 CSS 悬停动画工作

【英文标题】：Unable to get the CSS hover animation to work

【发布时间】：2020-05-06 05:15:34

【问题描述】：

我正在尝试使用转换和转换为这些按钮创建悬停状态，但它不起作用。是因为我已经有了按钮出现的动画吗？我是否没有正确选择元素。我究竟做错了什么？

.hero-content 
  text-align: center;
  margin: 20% auto;


.hero-content li 
  display: inline-block;


.hero-content a 
  display: block;
  width: 200px;
  background-color: red;
  margin-right: 20px;
  text-align: center;
  border-radius: 5px;
  transition: .5s;


.hero-content a 
  text-decoration: none;


.hero-content span 
  display: inline-block;
  margin: 40% 0;
  font-family: Sans-Serif;
  font-size: 1.3em;
  font-weight: 900;
  color: #fff;


.feat-btn 
  animation-name: feat-fly;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0, 0, .19, 1);


.box-one 
  animation-delay: 1s;


.box-two 
  animation-delay: 1.25s;


.box-three 
  animation-delay: 1.5s;


.box-four 
  animation-delay: 1.75s;


@keyframes feat-fly 
  from 
    transform: translateY(800px)
  
  to 
    transform: translateY(0)
  


.hero-content a:hover 
  transform: translateY(-20px);

<ul class="hero-content">
  <li>
    <a href="#" class="feat-btn box-one">
      <span>Web &amp; App</span>
    </a>
  </li>
  <li>
    <a href="#" class="feat-btn box-two">
      <span>Design</span>
    </a>
  </li>
  <li>
    <a href="#" class="feat-btn box-three">
      <span>Film &amp; Video</span>
    </a>
  </li>
  <li>
    <a href="#" class="feat-btn box-four">
      <span>Marketing</span>
    </a>
  </li>
</ul>

也许我什至可以稍微清理一下我的 CSS。我不确定可能不是。我宁愿保持大部分不变，仍然能够解决我面临的问题，但欢迎提出任何建议，但我主要想解决我上面描述的问题。

提前谢谢你！

【参考方案1】：

如果您想将鼠标悬停在文本上，请在文本所在的跨度上添加悬停。如果您想在红色框中添加悬停，则将悬停 CSS 提供给 .hero-content li: hover 。此外，我还添加了平滑过渡。 如果有查询，请在 cmets 中告诉我。

.hero-content 
  text-align: center;
  margin: 20% auto;


.hero-content li 
  display: inline-block;
  margin-bottom:20px;


.hero-content a 
  display: block;
  width: 200px;
  background-color: red;
  margin-right: 20px;
  text-align: center;
  border-radius: 5px;
  transition:.5s;


.hero-content a 
  text-decoration: none;


.hero-content span 
 display: inline-block;
 margin: 40% 0;
 font-family: Sans-Serif; 
 font-size: 1.3em;
 font-weight: 900; 
 color: #fff;
 transition: all 0.3s ease;



.feat-btn 
  animation-name: feat-fly;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0,0,.19,1);



.box-one 
  animation-delay: 1s;


.box-two 
  animation-delay: 1.25s;


.box-three 
  animation-delay: 1.5s;


.box-four 
  animation-delay: 1.75s;


@keyframes feat-fly 
  from transform: translateY(800px)
  to transform: translateY(0)


.hero-content a span:hover 
  transform: translateY(-20px);
  transition: all 0.3s ease;

<ul class="hero-content">
      <li><a href="#" class="feat-btn box-one">
     <span>Web &amp; App</span>
    </a></li>
      <li><a href="#" class="feat-btn box-two">
      <span>Design</span>
    </a></li>
      <li><a href="#" class="feat-btn box-three">
      <span>Film &amp; Video</span> 
    </a></li>
      <li><a href="#" class="feat-btn box-four">
      <span>Marketing</span>
    </a></li>
    </ul>

【讨论】：

谢谢！感谢您的回复。

【参考方案2】：

你在找这个吗？

.hero-content 
  text-align: center;
  margin: 20% auto;


.hero-content li 
  display: inline-block;


.hero-content a 
  display: block;
  width: 200px;
  background-color: red;
  margin-right: 20px;
  text-align: center;
  border-radius: 5px;
  transition:.5s;


.hero-content a 
  text-decoration: none;


.hero-content span 
 display: inline-block;
 margin: 40% 0;
 font-family: Sans-Serif; 
 font-size: 1.3em;
 font-weight: 900; 
 color: #fff;



.feat-btn 
  animation-name: feat-fly;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0,0,.19,1);



.box-one 
  animation-delay: 1s;


.box-two 
  animation-delay: 1.25s;


.box-three 
  animation-delay: 1.5s;


.box-four 
  animation-delay: 1.75s;


@keyframes feat-fly 
  from transform: translateY(800px)
  to transform: translateY(0)


.hero-content li:hover 
  transform: translateY(-20px);
  transition: 1s;

<ul class="hero-content">
      <li><a href="#" class="feat-btn box-one">
     <span>Web &amp; App</span>
    </a></li>
      <li><a href="#" class="feat-btn box-two">
      <span>Design</span>
    </a></li>
      <li><a href="#" class="feat-btn box-three">
      <span>Film &amp; Video</span> 
    </a></li>
      <li><a href="#" class="feat-btn box-four">
      <span>Marketing</span>
    </a></li>
    </ul>

【讨论】：

谢谢！感谢您的回复。不完全是我想要做的，但我非常感谢您的帮助。