gpt4 book ai didi

jquery - 用于更改包含 href 的 div 颜色的 CSS

转载 作者:太空宇宙 更新时间:2023-11-03 23:01:49 24 4
gpt4 key购买 nike

我正在尝试更改包含 hrefdiv 的背景颜色。我正在尝试使用 a:target & a:visited 属性来做到这一点。这似乎不起作用。我显然没有瞄准正确的目标。

我有下面的 nav 结构。

    <nav id="main-nav">
<a href="#" ><div></div></a>
<a href="#" id="p1" class="current"><div>OPTION - 1</div></a>
<a href="#" id="p2"><div>OPTION - 2</div></a>
<a href="#" id="p3"><div>OPTION - 3</div></a>
<a href="#" id="p4"><div>OPTOIN - 4</div></a>
<a href="#" id="p5"><div>OPTION - 5</div></a>
</nav>

下面是与上面相关的CSS

#main-nav {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
max-width: 300px;
width: 100%;
z-index: 5;
top: 0;
left: -300px; /* changed */
position: fixed;
background: #222;
text-align: center;
}

#main-nav a {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: white;
border-bottom: 1px solid #555555;
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
text-align: left;
max-height: 100px;
}


#main-nav a:hover, #main-nav a.current {
background: #3c3c3c;
}

#main-nav a:target {
background: yellow;
}

有什么办法可以实现吗?

已更新

        <nav id="main-nav">
<a href="#p0" ><div></div></a>
<a href="#p1" id="p1" class="current"><div>&nbsp DASHBOARD</div></a>
<a href="#p2" id="p2"><div>OPTION - 1</div></a>
<a href="#p3" id="p3"><div>OPTION - 2</div></a>
<a href="#p4" id="p4"><div>OPTION - 3</div></a>
<a href="#p5" id="p5"><div>OPTION - 4</div></a>
</nav>

:target div {
background: yellow;
}

最佳答案

这应该可以解决问题

:target div {
background: yellow;
}
<nav id="main-nav">
<a href="#p1" id="p1" class="current"><div>OPTION - 1</div></a>
<a href="#p2" id="p2"><div>OPTION - 2</div></a>
<a href="#p3" id="p3"><div>OPTION - 3</div></a>
<a href="#p4" id="p4"><div>OPTOIN - 4</div></a>
<a href="#p5" id="p5"><div>OPTION - 5</div></a>
</nav>

关于jquery - 用于更改包含 href 的 div 颜色的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36242427/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com