css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法

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

效果图:

css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法相关推荐

ArcEngine二次开发_02（鼠标移过图层中显示特定的属性信息）
首先的话这个移过图层的方法是在axMapControl.OnMouseMove事件中发生的. 然后接下来看代码: 代码当中的注释会详细解答: #region 鼠标移过图层中显示信息//用到的接口:IF ...
php柱形图上显示数字怎么改回来,sigmaplot可以在柱状图上显示数值
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:sigmaplot可以在柱状图上显示数值? 问题详情:sigmaplot可以在柱状图上显示数值?回答:[求助] 柱状图上如何让数值和 ...
Three TextureLoader纹理贴图不显示图片（显示黑色）
本人初学three.js,根据Three中文文档学习,在学习过程中发现TextureLoader纹理贴图不显示图片(显示黑色),在文档中的代码如下所示: // 纹理贴图映射到一个矩形平面上 var g ...
html怎么添加遮罩层,如何在浏览器窗口上添加一个遮罩层
背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着 ...
html注释图案,jQuery图片点击弹出遮罩层标记注释特效
这是一款简单的.非常实用的jQuery图片点击弹出遮罩层标记注释特效. HTML html结构非常简单.使用一个portfolio作为wrapper,在里面可以添加多个portfolio_item. ...
给图片加一个黑色半透明的遮盖层
12.给图片加一个黑色半透明的遮盖层--软设问题总结 12.1 知识点 12.1.1 img标签::after和::before失效 12.1.2 默认地,::after和::before是行内元素 ...
html背景图片半透明遮罩,BufferedImage在图片添加半透明遮罩层
利用BufferedImage处理图片时,例如生成海报往添加图片加文字,由于背景图颜色差异不统一,需要加入纯色半透明遮罩层后,再往上面添加文字. 以下代码演示:在图片底部加入一条高度20的半透明遮罩层 ...
CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
转：纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...

css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法

css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法相关推荐

最新文章

热门文章