第一次加載時，油滑的項目不可見

我對這一切仍然是非常新的，所以我很抱歉，如果這個問題是愚蠢的。第一次加載時，油滑的項目不可見

該滑塊應該顯示帶有圖像和標題的列表項目。當頁面首次加載時，只有一個巨大的空白空間，只有當我點擊該空間時，它纔有點做它應該做的事情。

這是我的代碼：

.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

來源

2017-12-18 Jenny M

任何控制檯錯誤？ – madalinivascu

沒有任何錯誤，在我看來，似乎與css有衝突，我只是不知道究竟是什麼導致它 –

如果您.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>

來源

2017-12-18 10:52:13

背景是一個黑暗的圖像，所以字體是可見的。我的問題是，我的下拉列表中的內容（應該顯示在懸停上）在我點擊空白空間之前是不可見的。有沒有辦法上傳截圖來解釋我的意思有點好點？ –

你有另一個CSS可以與你的下拉行爲一起工作嗎？ - 要添加圖像，編輯您的文章並按下Ctrl + G，或者只需點擊編輯器上的圖像按鈕！ :) –

謝謝，我在我原來的帖子中添加了屏幕截圖的鏈接:) 下拉工作完美罰款之前，我添加了滑塊...它從w3schools.com –

我的同事找到了解決這個問題：

的seasons DIV還有dropdownContent是上display:hidden當第一次加載頁面，那麼油滑集的寬度滑塊設置爲0px，並將0px框外的所有幻燈片對齊。

我改變display:hidden到height:0px, overflow-y:hidden代替，所以現在的光滑滑塊的負荷，因爲它應該:)

另外，我補充.slick-prev { left: -5px;} .slick-next { right: -5px;}到我的樣式表，因爲箭頭是造成一點麻煩與框的寬度。

來源

2017-12-19 09:28:16

第一次加載時，油滑的項目不可見

回答

相關問題