html - Unable to get the CSS hover animation to work
问题描述
I am trying to create a hover state for these buttons using the transform and transition, but it won't work. Is it because I already have an animation for the buttons to appear? Am I not selecting the element properly. What am I doing wrong?
.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 & 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 & Video</span>
</a>
</li>
<li>
<a href="#" class="feat-btn box-four">
<span>Marketing</span>
</a>
</li>
</ul>
Maybe I can even clean up my CSS a little. I am not sure probably not. I would rather keep most of it the same and still be able to fix the problem I am facing but any suggestions are welcome but I do mostly want to resolve the hove problem that I described above.
Thank you in advance!
解决方案
如果要悬停在文本上,则在文本所在的跨度上添加悬停。如果您想将悬停添加到红色框中,则将悬停 CSS 赋予.hero-content li: hover
. 此外,我还添加了平滑过渡。如果有疑问,请在评论中告诉我。
.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 & 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 & Video</span>
</a></li>
<li><a href="#" class="feat-btn box-four">
<span>Marketing</span>
</a></li>
</ul>
推荐阅读
- python-3.x - 在抓取 Web Selenium WebDriver 时定义用户代理字符串
- mule - 如何在 mule 4 的 JAVA SDK 操作中将函数作为参数传递
- javascript - 查找 GP 系列中的术语数使 3280
- sql - 如何在选择查询中添加条件?
- webrtc - MediaStreamAudioSourceNode 内存泄漏
- websphere-liberty - 无法使用 IBM HTTP Server 在 Liberty Admin Center 上检索服务器信息
- swift - 取消嵌套的组合发布者
- arrays - 用于填充工作表上的多个列的数组
- push-notification - 如何使用 FCM 仅向使用主题的离线设备发送推送通知?
- javascript - 卖家和城市的 v-model 表单字段为空