CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxmozilla
ozisak
ozisak

Reputation: 13

Mozilla and Chrome difference on CSS

I have a problem with my CSS. It works well on chrome but not on Mozilla Firefox.

My code is getting twitter icon to the left, when mouse is over the icons.

My HTML code:

<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>

And my CSS is there: 

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

Whatever I tried, that doesn't work unfortunately, could someone help me out?

Upvotes: 0

Views: 1121

Answers (2)

Talmid
Talmid

Reputation: 1401

The reason is because once the img moves past the mouse cursor, the :hover style is no longer applied. Even Chrome does this, but it seems that it doesn't check the :hover state until the mouse moves.

You can try animating right instead of margin and giving some right padding instead:

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

Upvotes: 0

Miguel
Miguel

Reputation: 20633

Update this line to cover the whole animation div, otherwise you will have to follow the icon with your mouse for it to animate bacause it moves away.

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

Full code:

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

Upvotes: 1

Related Questions