CSS懸停過渡

Question

我試圖創建下面的代碼相似，我已經試過的this.

導航欄的CSS過渡，但沒有奏效。

 .navbar-default .navbar-nav li a{ 
    /* color: #fff; */ 
    text-transform: uppercase; 
    padding-left: 24px; 
    padding-right: 24px; 
    position: relative; 
    } 

    .navbar-default .navbar-nav li a:before{ 
    background-color: #c83a3a; 
    height: 100%; 
    left: 50%; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    top: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    width: 0; 
    content: ""; 
    position: absolute; 
    -webkit-transition: all 0.3s ease 0s; 
    transition: all 0.3s ease 0s; 
    z-index: -1; 
    } 

    .navbar-default .navbar-nav li:hover a:before{ 
    width: 100%; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    } 

我目前的網站是here 這並不適用於頂級菜單欄工作，並適用於所有

Answer 1

休息試試這個：

.navbar-default .navbar-nav li a{ 
    /* color: #fff; */ 
    text-transform: uppercase; 
    padding-left: 24px; 
    padding-right: 24px; 
    position: relative; /* change */ 
    } 

    /*.navbar-default .navbar-nav li a:hover 
    { 
    background-color: #c83a3a; 
    transition: all 0.3s ease 0s; 
    }*/ 

    .navbar-default .navbar-nav li a:before{ 
    background-color: #c83a3a; 
    height: 100%; 
    left: 50%; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    top: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
    width: 0; 
    content: ""; 
    position: absolute; 
    -webkit-transition: all 0.3s ease 0s; 
    transition: all 0.3s ease 0s; 
    z-index: -1; 
    } 

    /* change */ 
    .navbar-default .navbar-nav li:hover a:before{ 
    width: 100%; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    } 

工作例如：https://jsfiddle.net/p3aqno7j/