過渡在Firefox和IE中無效，僅在Chrome中有效

Question

我有一個導航菜單，該菜單使用CSS3過渡屬性，效果很好，但是在Firefox中不起作用。 我嘗試過Google搜索，但沒有成功嘗試其他人遇到的類似問題的建議，有人可以幫忙嗎？
在此先感謝您的幫助和/或建議。

這是小提琴： http : //jsfiddle.net/number8pie/568fZ/5/

這是HTML：

<nav class="main-nav">
    <p class="nav-hvr-init">Navigate</p>
    <ul> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
        <li id="about-us">
            <a class="nav-link" href="#"></a>
            <span class="nav-text sr-only">about us</span>
        <li id="products">
            <a class="nav-link" href="#"></a>
            <span class="nav-text sr-only">products</span>
        <li id="the-team">
            <a class="nav-link" href="#"></a>
            <span class="nav-text sr-only">the team</span>
        <li id="environment">
            <a class="nav-link" href="#"></a>
            <span class="nav-text sr-only">environment</span>
        <li id="contact">
            <a class="nav-link" href="#"></a>
            <span class="nav-text sr-only">contact</span>
    </ul>
</nav>

CSS：

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

#nav-row {
  background-color: #CCFFCC;
}

#nav-col {
  height: 56px;
  padding-top: 0;
  background-color: #336600;
}

.main-nav {
  height: 56px;
  margin: 0 auto;
  background-color: #336600;
  position: relative;
}

.main-nav ul li {
  height: 56px;
  width: 56px;
  margin: 0;
  font-size: 21px;
  display: inline-block;
  text-transform: uppercase;
}

#about-us a {
  background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center;
}

#about-us a:hover {
  background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in;
  -moz-transition: all 350ms ease-in;
  -o-transition: all 350ms ease-in;
  transition: all 350ms ease-in;
}

#about-us a:active {
  background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}

#products a {
  background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center;
}

#products a:hover {
  background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in;
  -moz-transition: all 350ms ease-in;
  -o-transition: all 350ms ease-in;
  transition: all 350ms ease-in;
}

#products a:active {
  background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}

#the-team a{
  background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center;
}

#the-team a:hover {
  background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in;
  -moz-transition: all 350ms ease-in;
  -o-transition: all 350ms ease-in;
  transition: all 350ms ease-in;
}

#the-team a:active {
  background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}

#environment a {
  background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center;
}

#environment a:hover {
  background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in;
  -moz-transition: all 350ms ease-in;
  -o-transition: all 350ms ease-in;
  transition: all 350ms ease-in;
}

#environment a:active {
  background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}

#contact a {
  background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center;
}

#contact a:hover {
  background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center;
  -webkit-transition: all 350ms ease-in;
  -moz-transition: all 350ms ease-in;
  -o-transition: all 350ms ease-in;
  transition: all 350ms ease-in;
}

#contact a:active {
  background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center;
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}

.main-nav > ul {
  height: 56px;
  line-height: 100%;
  margin: 0;
  position: relative;
  float:right;
  padding: 0;
}

li > svg {
  margin: 9% 0 0 11%;
}

li > a {
  display: block;
  padding: 0;
  margin: 0;
}

.nav-link {
  margin: 0;
  height: 56px;
  z-index:2;
}

.nav-text {
  color: #FFFFFF;
  font-family: 'Arial Black';
  font-size: 21px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.nav-hvr-init {
  color: #76B766;
  font-family: 'Arial Black';
  font-size: 21px;
  text-transform: uppercase;
  line-height: 100%;
  margin-right: 4px;
  margin-bottom: 0;
  position: absolute;
  right: 280px;
  bottom: 0px;
  opacity: 0.5;
}

.txt-arrows {
  font-family: 'Arrows';
  font-size: 18px;
  text-transform: none;
  margin-bottom: 3px;
  margin-left: 4px;
}

和jQuery：

$( ".nav-link" ).hover(
  function() {
    var ntext = $( this ).siblings( "span" ).html();   
          $( ".nav-hvr-init" )
          .stop()
          .animate({right: '0px'},200,function() {
              $(this).html(ntext).animate({right:'280px'},200);
          });
  }, function() {
      $( ".nav-hvr-init" )
            .stop()
            .animate({right: '0px'},200,function() {
                $(this).html('Navigate').animate({right:'280px'},200);
            });
  }
);

Answer 1

我認為缺少的效果是按鈕圖像的淡入淡出。 實際上，只有Chrome瀏覽器會使用交叉淡入淡出過渡background 。 如果要在任何地方都需要這種效果，則必須使用更“標准”的方法，即通過在常規按鈕頂部通過opacity使新元素（具有懸停背景）淡入和淡出。 您可以使用偽元素來執行此操作。