CSS和JQ两种方式实现图片层上显示文字

     先看效果

 

    HTML 代码：

     <div id="outer" class="outer" style="background: url(IMG/thumb.jpg)">
             <a href="#" class="now"><span>电 影 钢 的 琴</span> </a>
     </div>

第一种（纯css代码实现），缺陷：不可以控制显示速度，--speed

.outer
{
  height: 280px;
  width: 500px;
  margin: 0px auto;
  position: relative;
}
.outer a
{
  display: none;
  text-decoration: none;
}
.outer:hover
{
  cursor: pointer;
}
.outer:hover a.now
{
  display: block;
}
.outer:hover a
{
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   text-decoration:none;
   color:White;
   font-weight:bolder;
   z-index: 10;
   width: 100%;
   height: 9%;
   line-height: 27px;
   background:gray;
  text-align: center;
}

第二种（jq方式实现）可以控制speed，效果较好

  html代码：

   <div id="outer" class="outer" style="background: url(IMG/thumb.jpg)">
        <a href="#" class="secondWayCSS"><span>电影钢的琴</span> </a>
  </div>

   css代码：

.outer
{
  height: 280px;
  width: 500px;
  margin: 0px auto;
  position: relative;
}
.outer:hover
{
   cursor:pointer;
}

.secondWayCSS
{
   display: none;
   position: absolute;
   bottom: 0;
   left: 0;
  color: red;
  z-index: 10;
  width: 100%;
  height: 9%;
  line-height: 27px;
  background:gray;
  text-align: center;
}

  jq代码：

$(function () {
     $("#outer").hover(function () {
       $(this).find("a").slideDown("normal");
      }, function () {
       $(this).find("a").slideUp("normal");
})
//实现的方式二；更简单的呀；
$("#outer").hover(function () {
     $(this).find("a").slideToggle(300);
    })
})

   

 

转载于:https://www.cnblogs.com/mc67/p/4815794.html