用Html制作的菜单栏，悬停和选择效果 #zgoraj{ 宽度：670px； 背景色：#FF8000； 高度：54px； } #zgoraj a{ 边框样式：实心； 边框宽度：2倍； 边框颜色：黑色； 填充顶部：20px； 显示：块； 浮动：左； 宽度：130px； 高度：30px； 文字装饰：无； 颜色：白色； 文本对齐：居中； /*盒影：0-7px22px6px#000000插图*/ } #zgoraj a:悬停{ 颜色：黑色； 背景色：白色； }

这是我的“菜单栏”的代码。当选择链接并将您重定向到指定的url时，我希望悬停效果保持不变（我将编辑href attribute）。

假设您在每个页面顶部都有相同的菜单，您需要更新CSS以向悬停样式添加额外的类定义：

<div id="zgoraj">
                <a  href="">Domov</a>
                <a   href="">Moj profil</a>
                <a   href="">Administracija</a>
                <a  href="" >Urejanje urnikov</a>
                <a   href="">Statistike</a>
            </div>
<style>
#zgoraj{
width:670px;
background-color:#FF8000;
height:54px;

}
#zgoraj a{
border-style:solid;
border-width:2px;
border-color:black;
padding-top: 20px;
display:block;
float:left;
width:130px;
height:30px;
text-decoration:none;
color:white;
text-align:center;
/*box-shadow: 0 -7px 22px 6px #000000 inset;*/
}
#zgoraj a:hover{
    color:black;
    background-color:white;

}

</style>

---

然后将“class=”active“”添加到应高亮显示的元素。

单击链接时，将加载一个新页面，那么为什么链接发生了什么事情会很重要呢？我将每个页面中的class=”active“添加到所选页面中。

#zgoraj a:hover, #zgoraj a.active {
  color:black;
  background-color:white;
}