css中鼠标没有移上去图片是黑色

Posted 2023-05-01

一般情况下，让一个图片有超链接，可以用a标签把 img包住，但是要做hover鼠标经过显示黑色半透明遮罩层如果用定位的话，定位的半透明遮罩层就会把图片遮住，以至于鼠标经过没有小手指，也点不到链接，所以这里给出一个思路，可以让a链接和图片同为子元素，然后display:block; 转换a为块元素,目的是在a元素里创建一个伪元素。盒子结构例子
这里我拿常见的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部分全部代码 参考技术A 鼠标未移入是黑白的,鼠标移入是彩色的 。

VUE鼠标移上去提示功能类似hover

首先是CSS

*{margin:0;padding:0}
		fieldset{
			width: 230px;
			padding:30px;
			margin:100px auto;
		}
		fieldset p{
			line-height: 40px;
		}
		fieldset label{
			font-size: 12px;
			color:#bbb;
			vertical-align:3px;
		}
		fieldset input[type="button"]{
			padding-left:5px;
			padding-right:5px;
		}
		fieldset span{
			width:190px;
			padding:5px;
			position:absolute;
			left:0px;
			top:28px;
			border: 1px solid #dfb86d;
			background-color: #fffde4;
			font-size: 12px;
			line-height: 20px;
			color:#dc9632;
		}
		#demo{
			position:relative;
		}

　　然后是HTML

	<fieldset>
		<form action="">
			<p>邮箱：<input type="text"></p>
			<p>密码：<input type="password" name="" id=""></p>
			<p id="demo" v-on:mouseenter="visible" @mouseleave="invisible"><input type="checkbox" id="miandenglu"><label for="miandenglu">十天内免登录</label>
				<span v-show="seen">为了您的信息安全，请不要在网吧或者公用电脑上使用此功能！</span>
			</p>
			<p>
			<input type="button" value="登 录">
			<input type="button" value="去注册">
			</p>
		</form>
	</fieldset>

　　最后是VUE

		var app= new Vue({
			el:‘#demo‘,
			data:{
				seen:false
			},
			methods:{
				visible:function(){
					this.seen = true;
				},
				invisible:function(){
					this.seen = false;
				}
			}
		});