2016-08-28 220 views
0

我試圖創建下面的代碼相似,我已經試過的this.CSS懸停過渡

導航欄的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 這並不適用於頂級菜單欄工作,並適用於所有

回答

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/

+0

我試圖把這個代碼,但下拉菜單的顏色改變,而不是父母....你可以檢查我的網站住在http:// ec2-54-1 69-208-115.ap-southeast-1.compute.amazonaws.com/magento/index.php/ –

+0

@VashikaranSpecialist你可以用你的菜單代碼做一個小提琴嗎? –