: с наведении не работает

Question

HTML

<table width="100%"> 
<tr> 
    <td width="90%"></td> 
    <td><a href="#" id="logout"><strong>Logout</strong></a></td> 
</tr> 
</table> 

CSS

@charset "utf-8"; 
/* CSS Document */ 

#logout { 
color:#BBB; 
} 

a:hover { 
color:#FFF; 
} 

Хотя цвет выхода из системы, как представляется, что дано в CSS, цвет не меняется при i наведите мышь на ссылку (до белого). Какова причина ?

Должен сказать, что есть другие файлы css, которые имеют тенденцию менять цвет ссылки, когда мышь находится над ними, и они работают нормально.

Answer 1

Селектор идентификатор (#logout) является более конкретным, то селектор типа (a) плюс псевдо-класс (:hover), так что ваш первый набор правил всегда будет win the cascade.

Вместо этого использовать #logout:hover.

Answer 2

Упрощая:

У вас есть два правила CSS, которые применяются к этому якорю.

Оба правила меняют цвет.

Может применяться только одно правило; можно выбрать только один цвет.

Браузеру необходимо выбирать между правилом на основе идентификатора (#logout) и правилом, основанным на типе элемента (<a>).

Правило, основанное на ID выигрывает в этой ситуации. Конкретнее указать идентификатор, чем указывать все элементы типа (якорь).

Answer 3

Вы должны следовать иерархии последовательности:

Link, Hover, Посещал

Например:

a:link 
{ 
text-decoration:none; 
color:#008b45; 
} 

a:hover 
{ 
margin-bottom: 3px solid #ff7400; 
    background:white; 
} 

a:visited 
{ 
color:#ee9a00; 
}