CSS轉換不起作用

Question

這是我的第一個問題，我需要幫助我的項目網站...我想使圖像向上移動，所以我有一個很好的幻燈片效果但懸停我仍然有快速過渡，我該如何修復這

<div id="nav_bar_menu"> 
    <li class="pocetna" id="nav_bar_menu_bars"><a id="nav_bar_a" href="#" ></a></li> 
    <li class="usluge" id="nav_bar_menu_bars"><a id="nav_bar_a" href="#" ></a></li> 
    <li class="projekti" id="nav_bar_menu_bars"><a id="nav_bar_a" href="#" ></a></li> 
    <li class="kontakt" id="nav_bar_menu_bars"><a id="nav_bar_a" href="#" ></a></li> 
</div><!-- Menu --> 

這裏是CSS

#nav_bar_menu { 
    height: 38px; 
    width: 580px; 
    background-color: #0F6; 
    float: right; 
    margin-left: 25px; 
    margin-right: 25px; 
    margin-top: 93px; 
    overflow:hidden; 

} 
#nav_bar_menu_bars { 
    height: 78px; 
    width: 131px; 
    margin-right: 14px; 
    display: inline; 
    float: left; 
} 
#nav_bar_a { 
    display: block; 
    position: relative; 
    width: 131px; 
    height:76px; 
    float: left; 
} 

.pocetna { 
    background-image: url(../Images/images/nav_bar_pictures_01.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

.usluge { 
    background-image: url(../Images/images/nav_bar_pictures_01.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

.projekti { 
    background-image: url(../Images/images/nav_bar_pictures_01.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

.kontakt { 
    background-image: url(../Images/images/nav_bar_pictures_01.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 
.pocetna:hover { 
    position:relative; 
    top:-38px; 
} 
.usluge:hover { 
    position:relative; 
    top:-38px; 
} 
.projekti:hover { 
    position:relative; 
    top:-38px; 
} 
.kontakt:hover { 
    position:relative; 
    top:-38px; 
} 

我tryed過渡，但它不是更改......請幫我 也許一些JavaScript，這將使動畫..

Answer 1

這裏是鏈接到一個頁面，文件的CSS過渡屬性... http://www.w3schools.com/css3/css3_transitions.asp 看看那個。

我推斷如下：你需要下面的類，在懸停時，沿着Y軸向上移動：.pocetna，.usluge，.projekti，.kontakt。這就是爲什麼你已經將屬性設置爲頂部：-38px;對於這些類使用：hover僞選擇器。爲了使這種情況順利發生，你需要下面的代碼...

.pocetna, .usluge, .projekti, .kontakt { 
    background-image: url(../Images/images/nav_bar_pictures_01.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
    -moz-transition: top 2s; 
    -webkit-transition: top 2s; 
    -o-transition: top 2s; 
    transition: top 2s; 
} 


.pocetna:hover { 
    position:relative; 
    top:-38px; 
} 
.usluge:hover { 
    position:relative; 
    top:-38px; 
} 
.projekti:hover { 
    position:relative; 
    top:-38px; 
} 
.kontakt:hover { 
    position:relative; 
    top:-38px; 
}