淡入淡出文字覆蓋範圍與可移動的下拉菜單

Question

我是一名博主，我正在盡力學習編寫日常使用的某些東西。今天，我試圖獲得一張照片，其中當您將鼠標懸停在上面時，它會將文本淡入，並且我希望該文本具有下拉菜單。

例如：我有一本書的圖片。當在圖片中間出現Books字樣時，該圖片具有透明覆蓋圖。當你將鼠標懸停在單詞上時，下拉菜單中會顯示Hauls，Reviews和Inspired By。我還希望能夠點擊「圖書」這個詞，並讓我看到所有貼有標籤的圖書。

這裏是我到目前爲止的代碼：

.container { 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.container:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: #000000; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
}

<div class="container"> 
 

 
    <img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" alt="Avatar" class="image" style="width:100%"> 
 

 
    <div class="middle"> 
 
    <div class="text"><a href="http://www.mynerdydelights.com/search/label/books">Books</a></div> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="dropdown"> 
 

 
    <button class="dropbtn">Dropdown</button> 
 

 
    <div class="dropdown-content"> 
 

 
    <a href="#">Hauls</a> 
 

 
    <a href="#">Reviews</a> 
 

 
    <a href="#">Inspired By</a> 
 
    </div> 
 

 
</div>

我希望這是有道理的！非常感謝你的幫助！

Answer 1

首先，將dropdown-content移動到middle的內部，因爲CSS懸停如果不是父元素就無法訪問，您可以像這樣更改HTML標記。

.container { 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    -webkit-transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
} 
 

 
.container:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: #000000; 
 
    display: inline-block; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
} 
 

 

 
/* this for show dropdown */ 
 

 
.middle .dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
} 
 

 
.middle:hover .dropdown-content { 
 
    display: block 
 
}

<div class="container"> 
 
    <img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" class="image" alt="" /> 
 
    <div class="middle"> 
 
    <a href="http://www.mynerdydelights.com/search/label/books" class="text">Books</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Hauls</a> 
 
     <a href="#">Reviews</a> 
 
     <a href="#">Inspired By</a> 
 
    </div> 
 
    </div> 
 
</div>

我覺得它就像你想..下拉內容始終顯示如果中間徘徊。