jquery - 图像过滤器并在鼠标悬停时显示文本

Question

我有一组图像，当鼠标悬停时需要更改为深灰色和较低的不透明度，并弹出预定义的文本。这仅适用于 CSS 吗？还是我需要使用 Jquery？我该怎么办？谢谢。

Answer 1

仅使用 css 是可能的：

HTML：

<div class="hover-div">
    <img src="http://lorempixel.com/400/200/" />
    <div class="hover-text">Lorem ipsum</div>
</div>
<div class="hover-div">
    <img src="http://lorempixel.com/400/200/" />
    <div class="hover-text">Lorem ipsum</div>
</div>
     ​

CSS：

div.hover-div{
    display:block;
height:200px;
 width:400px;   
    position:relative;
    margin-bottom:10px;
}

div.hover-div:hover .hover-text{
    display:block;        
}

div.hover-div:hover img{
    opacity:0.8;        
}

.hover-text{
    display:none;
    clear:both;
    margin-top:-20px;
    background: rgba(0,0,0,0.5);
    color:white;
    width: 100%;
    bottom:0;
    position:absolute;
    z-index:2;
}​

演示：http:
//jsfiddle.net/hueBt/1/

Answer 2

jsBin 演示

仅 CSS：

CSS：

  .box{
    position:relative;
    background:#444;
    width:160px;
    height:200px;
  }
  .box span{
    position:absolute;
    left:0px;
    display:none;
  }
  
  .box:hover img{
    opacity:0.4;
  }
  .box:hover span{
    display:inline;
  } 

HTML：

  <div class="box">
    <img src="img1.jpg">
    <span>This is the description 1</span>  
  </div>
  
  
  <div class="box">
    <img src="img2.jpg">
    <span>This is the description 2</span>  
  </div>