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

html-css020

css中鼠标没有移上去图片是黑色,第1张

一般情况下，让一个图片有超链接，可以用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部分全部代码

直接将其放入页面中的<style></style>即可，或者外部样式直接在内部引用。

html,body { 

-webkit-filter: grayscale(100%) 

-moz-filter: grayscale(100%) 

-ms-filter: grayscale(100%) 

-o-filter: grayscale(100%) 

filter: grayscale(100%) 

filter: gray 

}

在网页的<head></head>之间加入以下代码,调整网页的灰度等级…

body{FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayScale :1)}

img{FILTER: progid:DXImageTransform.Microsoft.BasicImage(grayScale :1)}

div {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

object {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

select {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

embed {filter: progid:dximagetransform.microsoft.basicimage(grayscale :1)}

或者加入以下代码到网站 css里

html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}