Html 列表菜单悬停&；活动文本颜色可以'；即使背景颜色改变，也不能改变_Html_Css

Html 列表菜单悬停&；活动文本颜色可以'；即使背景颜色改变，也不能改变

html css

Html 列表菜单悬停&；活动文本颜色可以'；即使背景颜色改变，也不能改变,html,css,Html,Css,我一直试图将下拉菜单的悬停/活动文本颜色更改为#8AE4E6。然而，由于某些原因，它不起作用。我尝试在背景色线下添加颜色：#8AE4E6，但似乎没有改变。此外，由于某些原因，我的链接一旦激活，就会变成紫色和橙色。我没有在我的代码中看到这些颜色的每个设置。这是默认值吗？我身体的颜色是白色谢谢下面是HTML和CSS <!DOCTYPE html> <html> <head> <meta charset='UTF-8'>

我一直试图将下拉菜单的悬停/活动文本颜色更改为#8AE4E6。然而，由于某些原因，它不起作用。我尝试在背景色线下添加颜色：#8AE4E6，但似乎没有改变。此外，由于某些原因，我的链接一旦激活，就会变成紫色和橙色。我没有在我的代码中看到这些颜色的每个设置。这是默认值吗？我身体的颜色是白色

谢谢

下面是HTML和CSS

    <!DOCTYPE html>
    <html>

    <head>
<meta charset='UTF-8'>
 <link rel="stylesheet" type="text/css" href="style2.css"/>

<title>SITETEST</title>



</head>

<body>
<div id="bottom"></div>
<div id="surround"></div>

<p id="bottomtext">A  -  W O R K  - I N  -  P R O G R E S S</p>
<p id="title">YLDNA'S SITE</p>
<nav id="primary_nav_wrap" >
<ul>
  <li class="hvr-fade"><a href="#">HOME</a></li>
  <li class="hvr-fade" ><a href="#">INTRODUCTION</a></li>
  <li class="hvr-fade"><a href="#">COMMITTEES</a>
    <ul>
      <li class="hvr-fade"><a href="#">Security Council</a></li>
      <li class="hvr-fade"><a href="#">CDIS</a></li>

    </ul>
  </li>
  <li class="hvr-fade"><a href="#">EXECUTIVES</li>
 <li class="hvr-fade"><a href="#">NEWS</a></li>
   <li class="hvr-fade"><a href="#">CONTACT</a></li>

</ul>
</nav>
</body>
</html>



 html{

     min-height:100%;

     background-size:cover;
     background-attachment: fixed;


 body {
    font-family: 'telegrafico'; 
     font-size: 1.1em;
     text-align: center;
text-decoration:none;
display:inline;
 max-width: 100%;
 background-color:#8AE4E6;
 background-size:cover;
 color:white;
}



 #primary_nav_wrap
 {
    margin-top:15px;

 }

 #primary_nav_wrap ul
 {
    list-style:none;
    position:absolute;
    float:left;
    margin:0;
    top:100%;
    left:27.5%;
     padding:0;
     max-width:50%;
     min-width:50%;
     max-height:500px;
     min-height:21%;
     color:white;


 }

 #primary_nav_wrap ul a
 {
    display:block;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
     line-height:32px;
     padding:0 15px;
     font-family: 'open sans'; 
     font-size: 0.9em;
     font-weight:200;
      text-align:center;


 }

 #primary_nav_wrap ul li
 {
    position:relative;
    float:left;
    margin:0;
    padding:0
 }

 #primary_nav_wrap ul ul
 {
     display:none;
     position:absolute;
     top:106%;
     left:-25%;
     padding:0px;
     text-align:left;

 }

 #primary_nav_wrap ul ul li
 {
    float:left;
     width:190px;   



 }

 #primary_nav_wrap ul ul a
 {
    line-height:120%;
    padding:10px 0px;

 }

 #primary_nav_wrap ul ul ul
 {
    top:0;
    left:100%
 }

 #primary_nav_wrap ul li:hover > ul
 {
    display:block;

 }



 .hvr-fade {
   display: inline-block;
    border-radius: 0px;
    color: #8AE4E6;


   vertical-align: middle;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
        -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
   color: #8AE4E6;

 }

 .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color:white;
  color:#8AE4E6;

 }


现场测试
A-W O R K-I N-p R O G R E S
YLDNA的网站












html{
最小高度：100%；
背景尺寸：封面；
背景附件：固定；
身体{
字体系列：“telegrafico”；
字体大小：1.1米；
文本对齐：居中；
文字装饰：无；
显示：内联；
最大宽度：100%；
背景色：#8AE4E6；
背景尺寸：封面；
颜色：白色；
}
#主导航环绕
{
边缘顶部：15px；
}
#主导航包裹ul
{
列表样式：无；
位置：绝对位置；
浮动：左；
保证金：0；
最高：100%；
左：27.5%；
填充：0；
最大宽度：50%；
最小宽度：50%；
最大高度：500px；
最小高度：21%；
颜色：白色；
}
#主导航包裹ul a
{
显示：块；
文字装饰：无；
字号：700；
字体大小：12px；
线高：32px；
填充：0 15px；
字体系列：“开放式SAN”；
字号：0.9em；
字号：200；
文本对齐：居中；
}
#主导航包裹ul li
{
位置：相对位置；
浮动：左；
保证金：0；
填充：0
}
#主导航包裹ul
{
显示：无；
位置：绝对位置；
最高：106%；
左-25%；
填充：0px；
文本对齐：左对齐；
}
#主导航包
{
浮动：左；
宽度：190px；
}
#主导航包裹
{
线高：120%；
填充：10px 0px；
}
#主导航包裹
{
排名：0；
左：100%
}
#主导航包裹ul li：悬停>ul
{
显示：块；
}
.hvr衰减{
显示：内联块；
边界半径：0px；
颜色：#8AE4E6；
垂直对齐：中间对齐；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
-webkit转换属性：颜色、背景色；
过渡属性：颜色、背景色；
颜色：#8AE4E6；
}
.hvr淡入：悬停，.hvr淡入：聚焦，.hvr淡入：激活{
背景色：白色；
颜色：#8AE4E6；
}

链接颜色没有改变，因为您没有针对链接。将您的代码更改为-

/* target anchors*/

 .hvr-fade a:hover, .hvr-fade a:focus, .hvr-fade a:active {
  background-color:white;
  color:#8AE4E6;
 }
/* target anchors*/

同时关闭

html{}

html{

     min-height:100%;

     background-size:cover;
     background-attachment: fixed;
    } /* missing curly bracket in your question*/

希望这对您有所帮助。

您好。谢谢您的帮助！悬停部分确实有效。但是，在悬停之前，文本仍然是紫色的（出于某种原因）.我不能，就我的一生而言，弄清楚这是怎么发生的以及如何改变它。我试图改变#primary_nav_wrap ul a以添加颜色：白色。但是，这与悬停重叠并使其变为白色。你知道我忽略了什么吗？可以使用相同的答案。那就是-以

锚定为目标。在这种情况下nav li a{color:green}