CSS Hover внутри Div элементов с субэлементов

Я хочу изменить цвет зависании для "Веб-сайт" и "Home"CSS Hover внутри Div элементов с субэлементов

<body> 
    <div class="navbar transparent navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand headtop" href="#">Web Site</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="headtop"><a href="#">Home</a></li>

И CSS этот код

a.headtop:hover, a:hover { 
    color: #fc4c1d; 
}

Но не работает ... как я могу заставить его работать?

a:hover {

работает для других ссылок в теле страницы но не работает для текста внутри DIV элементов.

Большое спасибо!

источник

2014-01-04 Anonymous

я предполагаю, что вы используете загрузчик, чтобы стиль вашей страницы

Bootstrap добавить правило стиля парения из <a> в .navbar некоторых из них будет следующим:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
color: #333333; 
background-color: transparent; 
}

, так что вы можете видеть, что .navbar-default .navbar-nav > li > a:hover имеет более высокую специфичность, чем ваша

a: hover, поэтому он будет бить ваше простенькое правило: hover, что приводит к вашей неудаче ворот.

решение:

отказаться от Bootstrap
переопределение правила в загрузчике для: парить
добавить идентификатор для вашей цели <a>, чтобы дать более высокую специфичность затем стилю #home:hover {}
использования Важные a:hover { color: red !important}

http://www.w3.org/TR/CSS2/cascade.html#specificity

источник

2014-01-04 03:10:33

использовать это:

.navbar a:hover{ 
    color: #fc4c1d !important; 
}

демо: http://jsfiddle.net/nukec/qL48R/2/

источник

2014-01-04 03:09:15

CSS Hover внутри Div элементов с субэлементов

ответ

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