html - 我的 :hover 似乎与某些东西有冲突
问题描述
你好(这里是法式面包英语)所以我有一个标志,当你将光标移到上面时它应该会下降,但它根本不起作用,我不知道为什么我的代码在这里:
.facebook{
left: 0%;
top:-10%;
animation-name: logofb;
animation-duration: 0.5s;
animation-delay: 7.5s;
animation-fill-mode: forwards;
transition-property: top;
transition-duration: 0.5s;
}
@keyframes logofb {
from {top:-10%;}
to {top: 0%;}
}
.facebook:hover {
top: 50px;
}
<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>
.reslogo {
position: fixed;
z-index: 200;
top: 0px;
}
问题可能是它已经有一个之前发生过的动画
解决方案
您有多种单位,并且可以简化定位发生。您可以使用以下方法轻松实现此目的transform:translateY()
:
.facebook {
display:block;
transform:translateY(-10%);
transition:transform .5s ease;
}
.facebook:hover {
transform:translateY(0);
}
<span class="facebook"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"></span>
推荐阅读
- nosql - 在 Oracle NoSQL 数据库云服务中配置容量单元时需要考虑哪些因素?
- android - 哪些版本的 Android 支持原生操作和共享表单?
- javascript - axios 获取请求在 useEffect 中不起作用
- python - Python:不能同时执行聚合和转换操作,`.agg` 的自定义函数给出错误
- r - 使用 Shiny 更改大小并存储用户上传的图像文件
- javascript - Discord.js 本地图像嵌入
- php - 在 WooCommerce 客户处理订单电子邮件通知中根据付款方式添加自定义消息
- sqlite - sqlite 性能:唯一索引与索引
- rust - 如何返回反向迭代器?
- html - Material-UI makeStyles 与 withStyles 生成的类名