-1

这是我的第一个问题，我的项目网站需要帮助...我想让图像向上移动，所以我有一个很好的幻灯片效果但是在悬停时我仍然有快速过渡，我该如何解决这个问题

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

我尝试了过渡，但它没有做出改变......请帮助我或者一些可以让它动画的javascript..

4

1 回答 1

0

这是一个链接到记录 CSS 转换属性的页面... http://www.w3schools.com/css3/css3_transitions.asp 看看那个。

What I am inferring is the following: You want the following classes, on hover, to move up along the Y-Axis: .pocetna, .usluge, .projekti, .kontakt. This is why you've set the attribute top: -38px; for these classes with the :hover pseudo selector. To make this happen smoothly with a transition you need the following code...

 .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;
}
于 2013-08-29T03:40:44.243 回答