javascript - 图像上的悬停效果就像出现一个按钮

Question

这是我的 html 代码:

               <div class="wrapper"> 
                <a target="_blank" href="klematis_big.htm">
                <img  data-src="holder.js/180x180" style="height:20%;width:100%;float:left;"
                src="../goyal/profile-pic.jpg" alt="Klematis">
               </a><p class="text">gjhgkuhgfkuyfrjytdcj</p>
               </div>

CSS:

 #wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

这是我主页的头像。 当我将鼠标悬停在图像上时，它会显示一个按钮和一些 具有不透明度的文本。 比如编辑个人资料图片等 您可以使用 jQuery 代码。

演示 Here

Answer 1

替换

 #wrapper .text {

与

 .wrapper .text {

和

#wrapper:hover .text {

与

.wrapper:hover .text {

wrapper 是一个 class 而不是 id。id 将用 # 表示> 和类将用 表示。