如何将鼠标悬停在上层div上以显示Link / DIV？

Question

我正在尝试在网站上建立团队部分。我有一个Div，上面有人的头像和名字。当我将鼠标悬停在名称上时，我想在其位置上显示一个链接并将名称向上移动。这样的事情（TEAM部分）：https://www.templatemonster.com/de/demo/55809.html

我尝试使用在这里找到的解决方案并对其进行修改，但是它并不能像我想要的那样真正起作用：

#stuff {
    position: absolute;
    top: 100px;
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-top: 50px;
    margin-bottom:15px;
}
#hover:hover {
    margin-top:25px;
    margin-bottom: 25px;
    opacity: 1.0;
}
#stuff:hover {

    opacity: 1.0;
}



<link rel="stylesheet" type="text/css" href="main.css">
<section>

    <div id="hover">Hover</div>
<div id="stuff">stuff</div>

使用CSS和/或Bootstrap是否有简单的解决方案？

Answer 1

我仅使用css作了示例。

section {
			margin:40px auto;	
		}
		
		.hover-div {
			color:#FFF;
			width:200px;
		}
		
		.hover-div .stuff {
			background-color:#F00;
			height:100px;
			margin-top:0;
			width:100%;	
			
			-webkit-transition:margin-top 0.3s;
					transition:margin-top 0.3s;
		}
		
		.hover-div .stuff-hidden {
			background-color:#00F;
			height:0;
			width:100%;
			
			-webkit-transition:height 0.3s;
					transition:height 0.3s;	
		}
		
		.hover-div:hover .stuff {
			margin-top:-40px;
		}
		
		.hover-div:hover .stuff-hidden {
			height:40px;
		}

<section>
	<div class="hover-div">
        <div class="stuff">Stuff</div>
        <div class="stuff-hidden">Hidden stuff</div>
    </div>
</section>