A: Наведите курсор на UL и LI

Question

Добрый вечер! В настоящее время я занимаюсь созданием личного, посредственного веб-сайта, чтобы изучить основы CSS, HTML5, Javascript и PHP. У меня есть навигационный баннер, простой баннер с непрозрачностью в верхней части моего веб-сайта, тогда у него есть ссылки навигации вверху справа, используя неупорядоченный список, а затем перемещаемый через CSS-документ.

Вот мой код в список:

<div id="list"> 
    <ul> 
     <li><a href="#" style="text-decoration: none; color: white;">Home</li> 
     <li><a href="#" style="text-decoration: none; color: white;">Downloads</li> 
    </ul> 
    </div> 

У меня есть делитель внутри навигационного делитель тега, лично я не вижу проблемы с этим, и моим CSS код приведен ниже:

a:hover 
{ 
    color: black; 
    border: 1px #EEE; 
} 

Я использовал альтернативный код, который указывает прямое местоположение, включая идентификатор разделителя для не только упорядоченного списка, но и основного разделителя, но ничего не работает. Пожалуйста, дайте мне знать, если вы можете мне помочь, и если вам потребуются какие-либо изображения или код, пожалуйста, сообщите мне. Спасибо, Рыцарь.

Answer 1

Я уверен, что этот встроенный стиль color: white; будет иметь приоритет над вашим дизайном a:hover { color: black; }. Вы можете выполнить поиск по специфике CSS, чтобы узнать больше об этом.

Я бы попытался удалить встроенные стили (атрибут style). В общем, вы должны стараться никогда не использовать их.

Попробуйте вместо этого:

<div id="list"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Downloads</a></li> 
    </ul> 
</div> 

a { 
    text-decoration: none; 
    color: white; 
} 

a:hover { 
    color: black; 
    border: 1px #EEE; 
} 

Answer 2

Это должно работать. Просто удалите свои встроенные стили. Посмотрите здесь:

HTML

<div id="list"> 
    <ul> 
     <li><a href="#" />Home</li> 
     <li><a href="#" />Downloads</li> 
    </ul> 
</div> 

CSS

a:hover { 
    color: black; 
    text-decoration : underline; 
} 
a { 
    text-decoration : none; 
} 

fiddle

Answer 3

Есть несколько вещей неправильно в вашем вопросе.

Встраиваемый стиль имеет большую специфичность и переопределяет стили CSS a:hover. Поместите оба стиля в блок <style> или отдельную таблицу стилей.

a:link { 
    text-decoration: none; 
    color: white; 
} 
a:hover { 
    color: black; 
    border: 1px #EEE; 
} 

order of these is important.

Ваш якорь <a href...> теги не закрыты.

<li><a href="#" style="text-decoration: none; color: white;">Home</li> 
<!-- should be --> 
<li><a href="#" style="text-decoration: none; color: white;">Home</a></li> 
<!-- removing the style ... --> 
<li><a href="#">Home</a></li> 

Ваш border: не определяет стиль границы. Это должно быть, если ни для чего другого, безопасность от непреднамеренного каскада.

a:hover { 
    color: black; 
    border: 1px solid #EEE; 
} 

См this fiddle