Question

我一直在尝试将下拉菜单中的悬停/活动文字颜色更改为＃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;

 }

Answer 1

链接颜色没有变化，因为您没有定位链接。将您的代码更改为此 -

/* 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*/

希望这对你有所帮助。

列表菜单悬停＆amp;尽管背景颜色发生变化，但无法更改活动文本颜色

1 个答案: