Question

我确信这是一个简单的修复。自从我创建了一个网站以来我已经很长时间了，所以当用户将鼠标悬停在导航栏中的链接上去绿色＆gt;时这种阴影：＃007D68，当它们活跃时变成橙色＆gt;这个阴影：＃F68E56。然而，在某条线上，我犯了一个错误。

HTML：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="wrapper">

<div id="NavBar">
<nav class="navbar navbar-default navbar-fixed-top">

        <div id="VictoriaHouse">
            <img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
        </div>
        <ul>
       <li> <a href="Evosite.html" id="NavHome"> Home </span> </a> </li>
       <li> <a href="#" class="NavLink"> News </a> </li>
       <li> <a href="#" class="NavLink"> Tenants </a> </li>
       <li> <a href="#" class="NavLink"> Heritage </a> </li>
       <li> <a href="#" class="NavLink"> About Us </a> </li>
       <li> <a href="#" class="NavLink"> Book the Meeting Room </a> </li>
       <li> <a href="#" id="NavContact"> Contact Us </a> </li>
       </ul>
    </div>
</nav> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>

</html>

CSS：

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

#wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}

#VictoriaHouse {
padding-left:200px;
padding-top:20px;
padding-bottom:20px;
padding-right:120px;
float:left;
}

/* NavBar formatting */

ul {
float:inline-block;
padding-top:45px;
}

li {
display: inline;
}

a { 
font-family: Bree Serif;
font-size:20px
}

 a:link {
color:black;
background-color:white;
}

a:hover {
color: #007D68; /* Green */
}

a:active {
text-decoration:none;
color: #F68E56; /*orange */
}

a:visited {
color:black;
text-decoration:none;
background-color:white;
}

.NavLink {
margin-left:20px;
text-decoration:none;
}

#NavHome {
margin-left:30px;
}

#NavContact {
margin-left:20px;
}

感谢。

Answer 1

font-color是无效的属性，color是您正在寻找的属性。尝试：

a:hover {
  color: #007D68; /* Green */
}

Answer 2

您正在以错误的顺序使用伪类。来自here：

请注意，A：hover必须放在A：链接和A：访问规则之后，否则级联规则会隐藏“颜色”＆＃39; A：悬停规则的属性。同样，因为A：active放在A：hover之后，当用户激活并悬停在A元素上时，将应用活动颜色（lime）。

正确的顺序应该是：

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

DEMO

Answer 3

你需要注意一些误解。

首先，您使悬停行为正常工作。那很简单。你的误解，并不孤单。很多人与你分享这个，除非他们是UI / UX工程师，然后他们就知道:)是：active代表活动页面，因此他们希望活动页面的链接按照他们的预期进行着色或样式化。那不对。

.active伪类仅在链接处于活动状态时（只要事件正在运行）进行表示以对其进行测试。设置import time time.time() while (pred > 0): # smooth jazz time.time()，然后单击并按住链接，只要保持该链接，您将看到为红色。意味着事件没有完成。当你释放时，它会回到自然状态。

正确的方法是创建一个.active类，并为该类分配所需的相应样式。然后，只要该页面是最新的，就将活动类添加到该链接。您可以通过客户端（JQuery或Javascript）或服务器端（PHP或ASP.NET）执行此操作，具体取决于您的框架。

我能给你的另一个重要提示。避免使用ID进行样式设置。请改用类。 ID不会级联，它们是唯一的（每页只有一个），这使得网站的样式变得困难，特别是全局使用。仅为服务器端功能保留ID的使用。

我会发布示例，但我认为我刚刚给你的信息引导你通过正确的道路，特别是因为这不是你的第一个牛仔竞技表演。）

enter image description here

测试

corrected - follow link

祝你好运！

Answer 4

我找到的解决方案是添加！重要;对于那些没有工作的元素，例如

a:hover {
text-decoration:none;
color: #007D68; /* Green */
}

这不起作用，当您将鼠标悬停在它上面时，它只是默认的蓝色下划线。然而，当在文本修饰之后添加！important之后，它很有效。

我的猜测是我正在使用的引导程序导航栏中的一个元素正在覆盖它。

如果有人有更有效的解决方案，那么这将是受欢迎的，但是现在这解决了我的问题。

悬停不在导航栏链接上工作

4 个答案: