css - :Hover not working on UL and 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;
}

我使用了一个替代代码，它指定了直接位置，包括分隔符 ID，不仅用于无序列表，而且还用于主分隔符，但没有任何效果。如果您能帮助我，请告诉我，如果您需要任何图片或更多代码，请通知我。谢谢，奈特。

Answer 1

你的问题有些地方不对。

内联样式具有更大的特异性并覆盖 CSS a:hover样式。将两种样式都放在 <style> 中 block 或单独的样式表。

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