答:悬停在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;
}

我使用了另一个代码，它指定了直接位置，其中不仅包括无序列表的分隔符ID，还包括主分隔符，但都不起作用。请让我知道，如果你可以帮助我，如果你需要任何图像或进一步的代码，请告诉我。谢谢，奈特。

Answer 1

你的问题中有几个地方是错的。

内联样式具有更大的特异性，并覆盖了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

Answer 2

我非常确定这个内联样式的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 3

这应该是可行的。只需移除内联样式即可。看看这里：

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;
}