Question

我正在尝试在网站上的导航元素内创建带格式的链接，当您将鼠标悬停在其上方时，这些链接会将默认的背景黑色文本从黑色背景白色文本转换为黑色。 nav元素中包含的链接无效，但页面上的其他链接也无法用于悬停。我已经附上了相关的CSS和html代码来显示问题。

我尝试在Internet Explorer Edge和Firefox中查看网页

    <header>
        <img class="leftpane"; src="images/emailus.jpg" alt="email us Title">
        <nav id="rightpane">
      <a href="about_page.html">About Me</a>
      <a href="gallery.html">Gallery</a>  
      <a href="resources.html">Resources</a>
      <a href="store.html">Store</a>
      <a href="contact.html">Contact Us</a> 


        </nav>
        </header>

    a:link{
        color:black;
        border-bottom: 1px solid black;
    }
    a: visited {
    background-color: grey;
    color:black;
    }
    a: hover{
    background-color: black;
    color: white;
    }
    a:active{
    background-color:cyan;
    color:black;
    }

    /*the following styles the header image and navigation on all pages*/
    img#leftpane{
    text-align: left;
    float:left;
    width:50%;
    } 

    nav#rightpane {
    float:right;
    width:40%;
    font: bold 13px Verdana;
    display: inline;
    color: black;

    }

我希望链接的导航菜单在您将其悬停时会突出显示。并在单击它们时将其变为青色。但只有青色部分有效，而悬停则无效。

Answer 1

删除元素和悬停/访问之间的多余空间。将a: hover更改为a:hover。有所作为。

a:link{
    color:black;
    border-bottom: 1px solid black;
}
a:visited {
background-color: grey;
color:black;
}
a:hover{
background-color: black;
color: white;
}
a:active{
background-color:cyan;
color:black;
}

/*the following styles the header image and navigation on all pages*/
img#leftpane{
text-align: left;
float:left;
width:50%;
} 

nav#rightpane {
float:right;
width:40%;
font: bold 13px Verdana;
display: inline;
color: black;

}

<header>
  <img class="leftpane"; src="images/emailus.jpg" alt="email us Title">
  <nav id="rightpane">
    <a href="about_page.html">About Me</a>
    <a href="gallery.html">Gallery</a>  
    <a href="resources.html">Resources</a>
    <a href="store.html">Store</a>
    <a href="contact.html">Contact Us</a> 


  </nav>
</header>

悬停在导航菜单中不起作用

1 个答案: