Question

我有一组图像，当moused需要更改为更改时，会执行深灰色和较低的不透明度，并弹出预定义文本。这只适用于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 demo

仅限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>

图像过滤器和鼠标悬停上的显示文本

2 个答案:

jsBin demo