这里我拿常见的li格子来说,十个li,宽度166px,高度104px,排成两排,img的size设置和li盒子一样
将a标签转换为块元素,设置宽高和li一样高,然后定位使其上浮,z-inex:1
然后给a创建一个伪元素,转块元素后,宽高也设置一样,定位使其脱离标准流上浮,并且层级比a高,z-inex设为2,由于a的伪元素after是a的一部分,所以鼠标经过这块区域依旧可以小手指点击跳转,然后hover把a里面的伪元素设置黑色半透明颜色background-color: rgba(0,0,0,.3)这样就实现了最终效果(最终效果放在了本文最底部)
li:hover a::after{
content: ‘’
display: block
position: absolute
left: 0
top: 0
width: 166px
height: 104px
background-color: rgba(0,0,0,.3)
z-index: 2
}
css部分全部代码
<STYLE type=text/css>A IMG {FILTER: gray}
A:hover IMG {FILTER:}
</STYLE>
可以把这段代码直接放到页面里,
这样你这个页面下所有带连接的图片都有这个效果了。不过只有IE支持