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

我尝试过渡但不做出改变......请帮助我或者也许是一些能让它变得有生气的javascript ..

Answer 1

以下是指向CSS过渡属性的页面的链接... http://www.w3schools.com/css3/css3_transitions.asp 看看那个。

我推断的是以下内容：您希望以下类在悬停时沿Y轴向上移动：.pocetna，.usluge，.projekti，.kontakt。这就是你将属性设置为top的原因：-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;
}

CSS过渡无效

1 个答案: