淡入淡出文字覆盖范围与可移动的下拉菜单

问题描述：

我是一名博主，我正在尽力学习编写日常使用的某些东西。今天，我试图获得一张照片，其中当您将鼠标悬停在上面时，它会将文本淡入，并且我希望该文本具有下拉菜单。淡入淡出文字覆盖范围与可移动的下拉菜单

例如：我有一本书的图片。当在图片中间出现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>

我希望这是有道理的！非常感谢你的帮助！

您试图创建图像时，图像悬停在图像的中间显示书籍单词，如果书籍字徘徊下拉文本显示。你的意思是？ –

是的，这就是我的意思 – southernsweets12

你想完成纯CSS或一些JavaScript？ –

答

首先，将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>

我觉得它就像你想..下拉内容始终显示如果中间徘徊。

淡入淡出文字覆盖范围与可移动的下拉菜单

相关推荐