打开按钮时停止图像移动
发布于2024-11-25 20:12 阅读(36) 评论(0) 点赞(16) 收藏(1)
我希望每次打开按钮时图像都停止向下移动。我尝试将图像的位置更改为固定，但图像从我的页面上消失了，我不知道它去了哪里。任何关于如何解决这个问题的建议都将不胜感激。
.image3 {
position: fixed;
}
.collapsible {
background-color: #C5E3ED;
color: black;
padding: 15px;
width: 400px;
border: none;
text-align: left;
outline: none;
font-size: 20px;
font-family:apple chancery;
border:1px solid rgba(0,0,0,0.1);
border-radius:5px;
}
.active, .collapsible:hover {
background-color: #8bc7db;
}
.content {
padding: 0 18px;
max-height: 0;
height: 300px;
overflow: scroll;
transition: max-height 0.2s ease-out;
background-color: #C5E3ED;
width: 365px;
}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script> <button class="collapsible">title</button>
<div class="content">
<p>text</p>
</div>
<img src="https://www.w3schools.com/Bootstrap/paris.jpg" alt="wolf" class="image3">解决方案
尝试position:fixed而不是display:fixed。display:fixed不存在。显示有块，内联，无，内联块等选项。
另外，如果您使用这样的边距，则可能是您没有以正确的方式进行编码。如果您希望它成为内联元素，我会研究使用自动边距和浮动。
编辑：看到您的评论，因为您想要一个临时解决方案，所以您可以在单击按钮时将其向上移动。
button:hover:active { margin-top:-5px; }
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/537212/c37ad61e74187ac84dab/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力