我正在嘗試通過單擊按鈕來關閉和打開 HTML 上的影像，但它不起作用。
這是我的代碼：
.cover {
position: sticky;
display: flex;
align-items: flex-start;
height: 275.25px;
width: 275.25px;
}
@keyframes closeCover {
0% {
height: 275.25px;
}
100% {
height: 0px;
}
}
.cover:active {
animation: closeCover 1s linear forwards;
}<div class="cover">
<img src="./images/arrow.svg" alt="close cover" id="close">
<a href=""><img src="./images/Fiure-de-vie.jpg" alt="cover" id="cover"></a>
</div>我正在嘗試使用 HTML/CSS 關閉和打開影像。
uj5u.com熱心網友回復：
你需要關閉影像溢位。此外，影像應該是其父級的 100% 寬度。觸發按鈕位于關閉的容器中，因此您必須將其移開。我使用簡單的 JS 函式添加一個類來打開和關閉它。
所以本質上它應該是這樣的：
const cover = document.querySelector('.cover');
const btn = document.querySelector('.close-btn');
btn.addEventListener('click', () => {
func();
});
function func() {
cover.classList.toggle('closed');
}.cover {
position: sticky;
display: flex;
align-items: flex-start;
height: 275.25px;
width: 275.25px;
overflow: hidden;
}
.cover img {
width: 100%;
}
.close-btn {
position: relative;
}
@keyframes closeCover {
0% {
height: 275.25px;
}
100% {
height: 0px;
}
}
.cover.closed {
animation: closeCover 1s linear forwards;
}<div>
<div class="cover">
<img src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=" alt="close cover" id="close">
</div>
<button class="close-btn">toggle</a>
</div>uj5u.com熱心網友回復：
label用.將影像移動到overflow: hidden. 然后連接到input type="checkbox"可以具有checked-state的標簽：
.cover {
position: sticky;
display: flex;
align-items: flex-start;
height: 275.25px;
width: 275.25px;
}
/* hides the checkbox */
.cover input {
display: none;
}
.cover label {
overflow: hidden;
}
#img:checked label {
animation: closeCover 1s linear forwards;
}
@keyframes closeCover {
0% {
height: 275.25px;
}
100% {
height: 0px;
}
}<div class="cover">
<input type="checkbox" id="img">
<label for="img"><img src="https://via.placeholder.com/100.jpg"></label>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/524931.html
標籤：htmlcss按钮