Question

我的CSS有问题。它适用于Chrome，但不适用于Mozilla Firefox。

当鼠标悬停在图标上时，我的代码左侧会显示推特图标。

我的 HTML 代码：

<header>

  <div id="animation">
    <a href="http://www.facebook.com.tr">
      <img id="socialiconface" src="images/facebook.png">
    </a>

    <a href="http://www.twitter.com.tr">
      <img id="socialicon" src="images/twitter.png">
    </a>
  </div>

</header>

我的 CSS 就在那里：

#socialicon {
  position: absolute;
  -webkit-transition-property: margin-right;
  -moz-transition-property: margin-right;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  width: 40px;
  height: 40px;
  top: 5px;
  right: 2px;
}

#socialiconface {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 5px;
  right: 2px;
}

#socialicon:hover {
  margin-right: 70px;
}

无论我尝试过什么，但不幸的是，有人能帮助我吗？

Answer 1

更新此行以覆盖整个动画div，否则你必须用鼠标按下图标才能动画，因为它会移动掉。

#animation:hover #socialicon {
    margin-right: 70px;
}

完整代码：

＆＃13;

#socialicon {
    position: absolute;
    -webkit-transition-property: margin-right;
    -moz-transition-property: margin-right;
    -webkit-transition-duration:2s;
    -moz-transition-duration: 2s;
    width:40px;
    height: 40px;
    top: 5px;
    right: 2px;
}
#socialiconface {
    position:absolute;
    width:50px;
    height: 50px;
    top: 5px;
    right: 2px;
}
#animation:hover #socialicon {
    margin-right: 70px;
}
img {
    background: #ccc;
}

＆＃13;

<header>
    <div id="animation">
        <a href="http://www.facebook.com.tr"><img id="socialiconface" src="images/facebook.png" /></a>
        <a href="http://www.twitter.com.tr"><img id="socialicon" src="images/twitter.png" /></a>
</div>
</header>

＆＃13;

Answer 2

原因是因为一旦img移过鼠标光标，就不再应用:hover样式了。甚至Chrome都会这样做，但似乎在鼠标移动之前它不会检查:hover状态。

您可以尝试设置动画right而不是margin并改为使用一些正确的填充：

＆＃13;

#socialicon {
  position: absolute;
  -webkit-transition-property: right;
  -moz-transition-property: right;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  width: 40px;
  height: 40px;
  top: 5px;
  right: -68px;
  padding-right: 70px
}
#socialiconface {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 5px;
  right: 2px;
}
#socialicon:hover {
  right: 2px;
}

＆＃13;

<header>


  <div id="animation">

    <a href="http://www.facebook.com.tr">
      <img id="socialiconface" src="images/facebook.png">

    </a>

    <a href="http://www.twitter.com.tr">
      <img id="socialicon" src="images/twitter.png">

    </a>
  </div>

</header>

＆＃13;

Mozilla和Chrome在CSS上的区别

2 个答案: