css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法_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部分全部代码图:
效果图:
智能推荐
python代码注释工具_python注释软件-程序员宅基地
文章浏览阅读618次。python注释软件是一款比较不错的编程工具，但是它主要是用来对你的编程语言进行注释和解析的，写代码并不是它的主要功能，所以使用python注释软件时还需了解清楚。软件介绍确保对模块, 函数, 方法和行内注释使用正确的风格Python中的注释有单行注释和多行注释：Python中单行注释以 # 开头，例如：：# 这是一个注释print("Hello, World!")多行注释用三个单引号 ''' 或..._python代码注释工具
android 日历 插件,Android实现日历控件示例代码-程序员宅基地
文章浏览阅读188次。做的是一个酒店的项目，可以选择入住和离开的日期。声明为了省事在网上找的资料，自己修改的逻辑，希望对需要的朋友有帮助。喜欢的给个好评。谢谢啦！祝生活愉快！先上图第一步，搭建布局xmlxmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="m..._日历只有三个文件源代码android
现在的python版本_为什么我要把python版本升级到3.8？是因为它的稳定？-程序员宅基地
文章浏览阅读801次。你是否还在使用Python3.7，3.6……甚至是更老的Python版本？确实，尝试去使用一个比较“新”的Python版本存在一定风险，我们容易遇到一些问题：生态，各种库的支持，兼容性……不同版本的解释器存在差异，以前的项目还能不能继续使用是个问题……新的特性或者功能太香，我实在忍不住更新了却遭遇到bug……image.png实际上，Python3.7的正式版最早发布于2018年06月15日，截止..._为啥2023还用python3.7版本
oracle 建立外键 引用条件约束 不能添加,Oracle外键约束（Foreign Key）的几个操作选项...-程序员宅基地
文章浏览阅读320次。关系型数据库是以数据表和关系作为两大对象基础。数据表是以二维关系将数据组织在DBMS中，而关系建立数据表之间的关联，搭建现实对象模型。主外键是任何数据库系统都需存在的约束对象，从对象模型中的业务逻辑加以抽象，作为物理设计的一个部分在数据库中加以实现。Oracle外键是维护参照完整性的重要手段，大多数情况下的外键都是紧密关联关系。外键约束的作用，是保证字表某个字段取值全都与另一个数据表主键字段相对应..._no primary key column specified for foreign oracle table
有符号数和无符号数在计算机中怎么区分？_机器怎么判断带符号二进制数-程序员宅基地
文章浏览阅读4.3k次。确如题主所说，计算机中存储的任何数据都是二进制形式，单看数据是无法认定其格式和内容的。计算机要用二进制编码来表达数值的符号，最直观的方法就是符号位。但为了保证基本算术运算在正负数上的一致性，x86计算机对负数采用了特殊的编码方式，即补码。为什么补码这么巧妙实现了正负数的加减运算？参见维基百科：补码-1的二进制表示下面结合题主提到的寄存器状态举个例子。为简化起见，我们8位二进制数来讲。先看8位二进制与无符号数和有符号数的对应二进制无符号 有符号00000000 0 000000001 1 1_机器怎么判断带符号二进制数
c语言图像剪影代码,信息系C语言社团活动剪影-南京商业学校.PDF-程序员宅基地
文章浏览阅读97次。信息系C 语言社团活动剪影12 月7 日，信息系C 语言社团第 15 周活动在汉中门 17 联院软件班举行，共有 24 位社团成员参加，由赵灵杰主持，指导老师是魏兰。本次活动一共有导入、理论、活动、反馈、总结等5 个版块，活动采取游戏化教学模式形式，活动内容涉及到数学、编程、游戏等方面。为了更好的理解本次社团的活动内容，我们还将采用小游戏的方式使同学们更易理解。本次社团活动充分展现了同学们的逻辑思..._南京商业学校 沈发
随便推点
在centos 7内核3.10的内核上编译安装6.0.3的最新内核_centos安装并编译内核-程序员宅基地
文章浏览阅读217次。在centos 7内核3.10的内核上编译安装6.0.3的最新内核_centos安装并编译内核
【Python】Python字符串格式化问题：%、format()与f-strings-程序员宅基地
文章浏览阅读858次。目 录一、字符串格式化方法概览二、format() 常用格式化 1、通过位置 2、通过关键字参数 3、通过对象属性 4、通过下标 5、格式限定符 ..._.format()限制符
汇总程序员学习Python必备的42个快捷键，看完收获满满_python规范化快捷键-程序员宅基地
文章浏览阅读624次。很多程序员在学习python的时候，是否遇到过一些操作不方便且很繁琐小问题，特别还会影响到你工作的进度，或许这50个快捷键能够帮助到你哦!首先先从Shift系列的按键开始：当然在学习Python的道路上肯定会困难，没有好的学习资料，怎么去学习呢？私信小编01即可获取大量Python学习资料\1. Shift+Alt+Enter 切换全屏编辑\2. Shift+Alt+C 新建类\3. Shift+Alt+箭头键 选择矩形文本\4. Shift+F3 查找上一个。_python规范化快捷键
KEIL debug无法进入main函数 或 debug卡死的原因总结_keil5debug卡在fpu_irqhandler-程序员宅基地
文章浏览阅读1.7w次，点赞23次，收藏110次。今天在新移植的ucos工程上，突然发现debug进不了main函数，debug直接进入SystemInit函数，单步发现循环走汇编指令（如图一），开始时推测是中断引起的，把关联的中断处理屏蔽后，发现还是有问题，费了九牛二虎之力才将问题解决，通过调查，发现能引起此问题的原因不少，简单总结如下，希望大家遇到此类问题能快速解决。图一整体来说导致debug无法进入main函数或卡死的原因有以下几类：A. 硬件问题B. KEIL软件配置问题C.代码本身的问题（我遇到的就是这个原因）下面_keil5debug卡在fpu_irqhandler
C语言练习题【复试准备】_c语言复试编程题目及答案-程序员宅基地
文章浏览阅读885次，点赞21次，收藏29次。参考：鹏哥C语言；苏小红C程序设计（C语言复试）_c语言复试编程题目及答案
Metasploit-ms17-010永恒之蓝（X86使用）_ms17_010_eternalblue x86-程序员宅基地
文章浏览阅读5.2k次。Metasploit正题搜索相关的漏洞插件msf > search 17-010搜索到了4个相关的插件：auxiliary/admin/smb/ms17_010_command auxiliary/scanner/smb/smb_ms17_010 exploit/windows/smb/ms17_010_eternalblue exploit/win..._ms17_010_eternalblue x86