0

您好，我真的尝试搜索并进行多项实验，无论如何我都能得到这个工作..

我使用 javascript 菜单，工作完美，但我尝试更改每个菜单的背景，它也很好.. 但是 HOVER 和 ACTIVE 不适用于这些元素，为什么.. 这段代码必须这样做或者那是我的想法.. =（请帮助我学习。

CSS代码

/* COMIENZA  TOP NAVI*/
 .topnavi a {
    width:90px;
    height:65px;
    float:left;
    margin:3px;
    background:url(../imagenes/topnav_01.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}


#tn02 {background:url(../imagenes/topnav_02.png) 0 0 no-repeat;}     
#tn03 {background:url(../imagenes/topnav_03.png) 0 0 no-repeat;}
#tn04 {background:url(../imagenes/topnav_04.png) 0 0 no-repeat;}
#tn05 {background:url(../imagenes/topnav_05.png) 0 0 no-repeat;}




/* mouseover state */
.topnavi a:hover {
    background-position:0 -65px;
}

/* active state (current page state) */
.topnavi a.active {
    background-position:0 -130px;
}        

/* TERMINA TOP NAVI*/

html代码

<div class="topnavi">
  <a href="1" class="active" id="tn01"/>
  <a href="2" class="" id="tn02"/>
  <a href="3" class="" id="tn03"/>
  <a href="4" class="" id="tn04"/>
  <a href="5" class="" id="tn05"/>
</div>
4

1 回答 1

1

ID 引用优先于类引用。不要忘记 CSS 中的“C”代表级联！您的#tn0*规则优先于background-position您稍后定义的属性。尝试添加!important.

/* mouseover state */
.topnavi a:hover {
    background-position:0 -65px !important;
}

/* active state (current page state) */
.topnavi a.active {
    background-position:0 -130px !important;
}
于 2013-01-26T18:56:00.097 回答