цвет фона не меняется на парения CSS

я использовал это для стилизации панель навигации моего веб-страницы, но цвет не меняется на паренияцвет фона не меняется на парения CSS

.nav { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.nav li { 
    float: left; 
} 

.nav li a:hover,.nav li a:active { 
    background-color:#7A991A; 
} 

.nav li a:link,.nav li a:visited { 
    display:block; 
    width:9em; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#98bf21; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
}

HTML код:

<ul class = "nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="products.html">Our Products</a></li> 
     <li><a href="aboutus.html">Contact us</a></li> 
</ul>

кто-то может предложить то, что я сделал не так?

источник

2014-01-20 user3131961

Можете ли вы включить html? То, что сразу приходит на ум, - это задаться вопросом, действительно ли элемент «a» имеет высоту. – Semicolon

Пожалуйста, добавьте скрипку. –

@Wisam http://jsfiddle.net/BcJR8/ –

Либо добавить !important здесь:

.nav li a:hover,.nav li a:active { 
    background-color:#7A991A !important; 
}

Или переместить свойства :hover (и :active) после тех, для :link.

источник

2014-01-20 07:53:02

Его работа. большое спасибо! но я не понимаю, в чем проблема с написанием этого перед ': link'? – user3131961

@ user3131961 CSS читается линейно сверху вниз, объявляя 'a: hover' перед' a', я предполагаю, что любое состояние объявлено до того, как 'a' будет переопределено. –

Заменить .nav a:link с .nav li a

demo

.nav li a, .nav li a:visited { 
    /*here^^^*/ 
      display:block; 
      width:9em; 
      font-weight:bold; 
      color:#FFFFFF; 
      background-color:#98bf21; 
      text-align:center; 
      padding:4px; 
      text-decoration:none; 
      text-transform:uppercase; 
     }

источник

2014-01-20 07:52:44 NoobEditor

По-прежнему ту же проблему – user3131961

@ user3131961: отлично работает в скрипке ..... проверьте демо, которое я дал !! – NoobEditor

@ user3131961: у вас есть какой-нибудь другой 'nav' класс css тоже ... ?? – NoobEditor

Теперь это прекрасно работает на скрипке.

.nav { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.nav li { 
    float: left; 
} 

.nav li a:link,.nav li a:visited { 
    display:block; 
    width:9em; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#98bf21; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
} 

.nav li a:hover,.nav li a:active { 
    background-color:#7A991A; 
}

источник

2014-01-20 08:01:58

.nav { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.nav li { 
    float: left; 
} 
.nav li a:visited{ 
    background-color:#98bf21; 
} 
.nav li a:hover,.nav li a:active { 
    background-color:#7A991A; 
} 

.nav li a{ 
    display:block; 
    width:9em; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#98bf21; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
}

источник

2014-01-20 08:02:02 skshoyeb

Ваш a:hover покрывается a:link или так далее.

Я думаю, поскольку a:hover имеет такой же уровень с a:link, класс Css в нижнем положении файла имеет более высокий приоритет.

Вы можете обратиться к этому:

resolve css conflict

источник

2014-01-20 08:06:01 oodograss

Вот demo.

.nav { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.nav li { 
    float: left; 
} 

.nav-link { 
    display:block; 
    width:9em; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#98bf21; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
} 

.nav-link:hover,.nav-link:active { 
    background-color:#7A991A; 
}

это не очень хорошая практика, чтобы гнездо слишком много тегов, дать ему класс.
используйте :link :visited :hover :active только в том случае, если вы хотите переписать стили по умолчанию.
css - это каскадная таблица стилей, порядок имеет значение, поместите .nav-link сначала, чтобы нормализовать стили по умолчанию, а затем перезаписаны по умолчанию с помощью :hover и :active.
!important не является хорошей практикой здесь, просто измените порядок.

источник

2014-01-20 08:17:30 GSSxGSS

Я попробовал. он работал, но потом я понял, что когда я нажимаю на ссылку, цвет остается прежним. – user3131961

цвет фона не меняется на парения CSS

ответ

Смежные вопросы