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