我目前正在尝试为我的网站之一设计导航栏。此导航栏将横跨网页顶部。
问题是,当我将鼠标悬停在元素上时,我可以让元素改变颜色,但是一旦页面处于事件状态,我就无法让元素保持悬停状态。因此,例如,如果我想去“主页”,我会将鼠标悬停在导航栏中的“主页”项上,它会变成灰色,当我单击它返回“index.php”时,“主页” "在导航栏中将保持灰色。 (导航栏背景为黑色)。
我已经格式化了一个表格,其中只有一行和几条数据,它们将用作链接。这是 HTML 代码的样子:
<div id="header_banner">
<table id="header_banner_table">
<tr id="header_banner_row">
<td id="header_banner_a"><a class ="link1" href="">Item 1</a></td>
<td id="header_banner_b"><a class ="link1" href="">Item 2</a></td>
<td id="header_banner_c"><a class ="link1" href="">Item 3</a></td>
<td id="header_banner_d"><a class ="link1" href="">Item 4</a></td>
<td id="header_banner_e"><a class ="link1" href="">Item 5</a></td>
<td id="header_banner_f"><a class ="link1" href="">Item 6</a></td>
<td id="header_banner_g"><a class ="link1" href="">Item 7</a></td>
</tr>
</table>
</div>
这是一些 CSS:
#header_banner {
display: block;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 71px;
background-color: black;
color: white;
font-size: 18px;
text-align:center;
text-transform: uppercase;
text-decoration: none;
}
#header_banner_table {
position: fixed;
top: 0px;
width: 60%;
padding: 0px;
margin-left: 20%;
margin-right: 20%;
}
.link1 {
position: relative;
display: block;
color: white;
text-decoration: none;
padding-top: 23px;
padding-bottom: 23px;
padding-left: 20px;
padding-right: 20px;
}
.link1:hover{
position: relative;
display: block;
text-decoration: none;
color: white;
padding-top: 23px;
padding-bottom: 23px;
padding-left: 20px;
padding-right: 20px;
background-color: gray;
}
所以目前导航栏的背景是黑色的,当你将鼠标悬停在某处时,它会变成灰色。我希望它在该页面处于事件状态时保持灰色。
有什么解决办法吗?
提前谢谢你。
最佳答案
尝试
:focus
或
:active
但我认为它需要被点击。
关于html - 更改导航栏背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18049059/