我對應用有趣的代碼來構建我的網站非常感興趣，但我仍在嘗試理解 HTML/CSS 的邏輯。
基本上，我現在正在嘗試基于此演示進行編輯，并希望將“單擊我”變成具有“關閉”功能的按鈕，但我失敗了。
我找到了一個類似的演示，但仍然無法將它們合并在一起。我應該怎么做或有人可以提出一些建議嗎？非常感謝！
input {
display: none;
}
label {
margin: 0rem 0rem;
/*spacing between button and divider*/
cursor: pointer;
display: inline-block;
padding: 0.5rem 1rem 0.5rem 0rem;
color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
-webkit-transition: background-color 0.2s, color 0.2s;
width: 100%;
}
label:hover {
color: rgba(0, 0, 0, 0.3);
}
.hiddentext {
-webkit-transition: height .3s ease;
height: 0px;
overflow: hidden;
width: 100%;
background: rgba(255, 255, 0, 1);
}
input:checked .hiddentext {
height: 800px;
max-height: 85vh;
}
input:checked .hiddentext {
height: 800px;
max-height: 200px;
}
#check {
position: absolute;
appearance: none;
cursor: pointer;
}
#check label {
position: absolute;
cursor: pointer;
background: #ff00ff;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition: all 500ms ease;
}
#check label:after {
content: "Open"
}
#check:checked label {
background: #00ff00;
}
#check:checked label:after {
content: "Close"
}<h2>Title</h2>
<hr>
<div>
<label for="check">More</label>
<hr>
<input name="check" id="check" type="checkbox">
<div class="hiddentext">
Hidden message
</div>
</div>uj5u.com熱心網友回復：
<input>由于您的 CSS 使用“ ”選擇器，因此您需要進一步向上移動。
您也可以使用~代替 .
一個可能的解決方案是這樣的：
<h2>Title</h2>
<hr>
<div>
<input name="check" id="check" type="checkbox">
<label for="check"></label>
<hr>
<div class="hiddentext">
Hidden message
</div>
</div>
input {
display: none;
}
label {
margin: 0rem 0rem;
/*spacing between button and divider*/
cursor: pointer;
display: inline-block;
padding: 0.5rem 1rem 0.5rem 0rem;
color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
-webkit-transition: background-color 0.2s, color 0.2s;
width: 100%;
}
label:hover {
color: rgba(0, 0, 0, 0.3);
}
.hiddentext {
-webkit-transition: height .3s ease;
height: 0px;
overflow: hidden;
width: 100%;
background: rgba(255, 255, 0, 1);
margin-top: 10px;
}
input:checked ~ .hiddentext {
height: 800px;
max-height: 200px;
}
#check {
position: absolute;
appearance: none;
cursor: pointer;
}
#check label {
position: absolute;
cursor: pointer;
background: #ff00ff;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition: all 500ms ease;
}
#check label:after {
content: "Open"
}
#check:checked label {
background: #00ff00;
}
#check:checked label:after {
content: "Close"
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/479593.html