英文:
Trying to change width of two divs when the first div is clicked
问题
我有两个div，第一个初始宽度为100%，第二个是隐藏的。当用户点击第一个div时，第二个div应该变为可见，宽度为35%，第一个div应该缩小到65%。
这是我的代码，但它不起作用：
<div class="big-width">
<span>这个div更大</span>
</div>
<div class="small-width">
<span>这个div更小</span>
</div>
和我的CSS：
.big-width {
display: flex;
width: 100%;
}
.small-width {
display: none;
width: 0%;
}
.big-width:focus {
width: 65%;
}
.big-width:focus ~ .small-width {
display: flex;
width: 35%;
}
我尝试点击第一个div，但什么也不发生。
英文:
I have two divs, the first one has an initial width of 100% and the second one is hidden. Whne the user clicks on the first div, the second div should become visible and have the width of 35% and the first one should shrink to 65%.
Here is my code, but it doesn't work:
<div class="big-width">
<span> This div is the bigger of the two</span>
</div>
<div class="small-width">
<span>This div is smaller</span>
</div>
And my css:
.big-width{
display:flex;
width:100%;
}
.small-width{
display:none;
width: 0%;
}
.big-width:focus{
width:65%;
}
.big-width:focus ~ .small-width{
display:flex;
width:35%;
}
I try clicking on the first div but nothing happens.
答案1
得分: 1
以下是您要翻译的内容：
您可以为 div 元素添加 tabindex，以使其可聚焦：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.big-width {
display: flex;
width: 100%;
background: tomato;
}
.small-width {
display: none;
width: 0%;
}
.big-width:focus {
width: 65%;
}
.big-width:focus ~ .small-width {
display: flex;
width: 35%;
}
<!-- language: lang-html -->
<div class="big-width" tabindex="0">
<span> This div is the bigger of the two</span>
</div>
<div class="small-width">
<span>This div is smaller</span>
</div>
<!-- end snippet -->
英文:
You can give the div element a tabindex so that it is focusable:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.big-width {
display: flex;
width: 100%;
background: tomato;
}
.small-width {
display: none;
width: 0%;
}
.big-width:focus {
width: 65%;
}
.big-width:focus ~ .small-width {
display: flex;
width: 35%;
}
<!-- language: lang-html -->
<div class="big-width" tabindex="0">
<span> This div is the bigger of the two</span>
</div>
<div class="small-width">
<span>This div is smaller</span>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论