作为一个刚接触html和css的小白,总会遇到一些细节问题,在这里写下一个我遇到的小问题的解决方法,方便今后加深理解,更高效地学习。
一般情况下，让一个图片有超链接，可以用a标签把 img包住，但是要做hover鼠标经过显示黑色半透明遮罩层如果用定位的话，定位的半透明遮罩层就会把图片遮住，以至于鼠标经过没有小手指，也点不到链接，所以这里给出一个思路，可以让a链接和图片同为子元素，然后display:block; 转换a为块元素,目的是在a元素里创建一个伪元素。
这里我拿常见的li格子来说,十个li,宽度166px,高度104px,排成两排,img的size设置和li盒子一样
将a标签转换为块元素,设置宽高和li一样高,然后定位使其上浮,z-inex:1;
.li-box ul li a {
display: block;
width: 166px;
height: 104px;
position: absolute;
left: 0;
top: 0;
z-index: 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部分全部代码图:
效果图:
