我的 :hover 似乎与某些东西有冲突答案

【问题标题】：My :hover seem to be in conflict with something我的 :hover 似乎与某些东西有冲突
【发布时间】：2019-08-12 18:33:14
【问题描述】：

你好（这里是法式面包英语）所以我得到了一个徽标，当您将光标移到它上面时它应该会下降，但它根本不起作用，我不知道为什么我的代码在这里：

.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;
}

问题可能是它已经有一个之前发生过的动画

【问题讨论】：

您使用关键帧而不是变换是否有原因？
我不知道我只是按照互联网上的指南

标签： html css animation hover

【解决方案1】：

您有多种单位，并且可以简化定位发生。您可以使用transform:translateY() 轻松实现此目的：

.facebook {
  display:block;
  transform:translateY(-10%);
  transition:transform .5s ease;
}

.facebook:hover {
  transform:translateY(0);
}

&lt;span class="facebook"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" height="13%" width="13%"&gt;&lt;/span&gt;

【讨论】：