gpt4 book ai didi

html - 如何一键定位两个元素?

转载 作者:搜寻专家 更新时间:2023-10-31 22:41:38 24 4
gpt4 key购买 nike

我想在点击一个盒子后改变它的背景颜色,同时用纯 CSS 创建另一个盒子。我用目标选择器试过了。但我只能设法完成其中一个问题,而不能同时完成两个问题。

这是一个DEMO我的尝试。

/* fonts */

p {
font-size: 10px;
}
#school::after,
#work::after {
font-size: 10px;
content: "Second box";
color: white
}
/* white boxes */

.panel {
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #262626;
position: relative;
}
/* span (100%, 100%) inside the white-boxes */

.panel span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* second-box */

.panel div {
display: none;
}
/* if white-box is targeted, this lets the second-box appear */

.panel div:target {
display: block;
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid black;
border-radius: 4px;
position: absolute;
left: 70px;
}
/* for testing purposes */

.panel:active span {
background-color: black;
}
<p>White Boxes</p>
<div class="panel">
<a href="#school">
<span></span>
</a>
<div id="school"></div>
</div>

<div class="panel">
<a href="#work">
<span></span>
</a>
<div id="work"></div>
</div>

最佳答案

您可以使用 :target 伪类修改任意数量的元素的呈现,只要每个元素都嵌套在带有 的元素中id:targeted:

/* fonts */
p {
font-size: 10px;
}

#school div::after, #work div::after {
font-size: 10px;
content: "Second box";
color: white
}


/* white boxes */
.panel {
height: 50px;
width: 50px;
background-color: white;
border: 1px solid #262626;
position: relative;
}

/* span (100%, 100%) inside the white-boxes */
.panel span {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
}

/* second-box */
.panel a div {
display: none;
}

/* if white-box is targeted, this lets the second-box appear */
.panel a:target div {
display: block;
height: 50px;
width: 50px;
background-color: blue;
border: 1px solid black;
border-radius: 4px;
position: absolute;
left: 70px;
}


/* if white-box is targeted, this gives the box a blue background */
.panel a:target span {
background-color: blue;
}


/* for testing purposes */
.panel:active span {
background-color: black;
}
<p>White Boxes</p>
<div class="panel">
<a href="#school" id="school">
<span></span>
<div></div>
</a>
</div>

<div class="panel">
<a href="#work" id="work">
<span></span>
<div></div>
</a>
</div>

关于html - 如何一键定位两个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33899682/

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