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。idwill 表示#和 class 将表示.

Answer 2

你也可以通过不透明度和 CSS3 过渡来实现，这里有一个Fiddle

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">Text Text Text ...</p>
</div>

CSS

.wrapper .text {
  position:relative;
  bottom:30px;
  left:10px;
  opacity:0;
  transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
}

.wrapper:hover .text {
  opacity:1;
}