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将代表#，而课程将代表.

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;
}

悬停在图像上的效果就像一个按钮

2 个答案: