第一次加载时，油滑的项目不可见

  • Z时代
  • 2024-01-10
  • 分类：问答

我对这一切仍然是非常新的，所以我很抱歉，如果这个问题是愚蠢的。第一次加载时，油滑的项目不可见

该滑块应该显示带有图像和标题的列表项目。当页面首次加载时，只有一个巨大的空白空间，只有当我点击该空间时，它才有点做它应该做的事情。

这是我的代码：

.preview {  
    overflow: hidden;  
    width: 150px;  
    height: auto;  
    margin: 10px;  
}  
.preview:hover,  
.arrow:hover {  
    cursor: pointer;  
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}  
.dropdownBtn {  
    text-decoration: none;  
    display: block;  
    color: white;  
    padding: 10px 20px;  
    margin: 5px 20px;  
    width: fit-content;  
}  
.dropdownBtn:hover {  
    background-color: #37264a;  
}  
.dropdownContent {  
    display: none;  
}  
.dropdownBox:hover .dropdownContent {  
    display: block;  
}  
.dropdownElement {  
    display: inline-block;  
}  
.dropdownElement>img {  
    display: block;  
    width: 100px;  
}  
.dropdownElement>a {  
    display: block;  
}

<div class="dropdownBox">  
    <a class="dropdownBtn" href="#">Season 1</a>  
    <ul class="dropdownContent">  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 1 Rose</a></li>  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 2 The End of the World</a></li>  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 3 The Unquiet Dead</a></li>  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 4 Aliens of London</a></li>  
    </ul>  
</div>

我试图把我的列表分为多个div元素但没有改变任何东西，从最终列表中的元素去掉类散播都喜欢疯。

我CSS中的缺陷在哪里？ 如果有人发现它，会非常感激！

here's what the page looks like when it's first loaded and this is what it looks like after I click on the empty space

UPDATE我删除了 '预览' 类，现在它looks like this

回答：

如果您.dropdownBtn没有background-color，这将是白色的。

.preview {  
    overflow: hidden;  
    width: 150px;  
    height: auto;  
    margin: 10px;  
}  
.preview:hover,  
.arrow:hover {  
    cursor: pointer;  
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}  
.dropdownBtn {  
    text-decoration: none;  
    display: block;  
    color: white;  
    background-color: black;  
    padding: 10px 20px;  
    margin: 5px 20px;  
    width: fit-content;  
}  
.dropdownBtn:hover {  
    background-color: #37264a;  
}  
.dropdownContent {  
    display: none;  
}  
.dropdownBox:hover .dropdownContent {  
    display: block;  
}  
.dropdownElement {  
    display: inline-block;  
}  
.dropdownElement>img {  
    display: block;  
    width: 100px;  
}  
.dropdownElement>a {  
    display: block;  
}

<div class="dropdownBox">  
    <a class="dropdownBtn" href="#">Season 1</a>  
    <ul class="dropdownContent">  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 1 Rose</a></li>  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 2 The End of the World</a></li>  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 3 The Unquiet Dead</a></li>  
    <li class="dropdownElement preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 4 Aliens of London</a></li>  
    </ul>  
</div>

回答：

我的同事找到了解决这个问题：

的seasons DIV还有dropdownContent是上display:hidden当第一次加载页面，那么油滑集的宽度滑块设置为0px，并将0px框外的所有幻灯片对齐。

我改变display:hidden到height:0px, overflow-y:hidden代替，所以现在的光滑滑块的负荷，因为它应该:)

另外，我补充.slick-prev { left: -5px;} .slick-next { right: -5px;}到我的样式表，因为箭头是造成一点麻烦与框的宽度。

以上是 第一次加载时，油滑的项目不可见 的全部内容， 来源链接： utcz.com/qa/262625.html

回到顶部