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

fiddle

答：悬停不在UL和LI上工作

3 个答案: