作为一个刚接触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部分全部代码图: 效果图:
