关于使用CSS的hover鼠标移至图片触发图片变化问题

图片说明

如图,鼠标移至黄色图片上方,想让图片3的这块灰色区域完全覆盖黄色区域,该怎么办呢? 以下为相关的代码块:

.type a{ position:relative;width:320px;margin:0 0px 0 0;float:left;height:232px;}

.type li{width:320px;float:left;margin:2px;display:block;list-style:none;}

.type a:hover{text-decoration:none;cursor:hand;}

.type a span{display:none;cursor:hand;text-align:center;color:#FFF;line-height:36px;padding:98px 0;font-weight:bold;}

.type a:hover span{width:320px;background:#000;display:block;position:absolute;bottom:0px;left:0;color:##FFF;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;align:center;}


<div class="type" style=" height: 250px;width: 600px;margin: 0px;padding: 0px;  position: absolute;left: 900px;top: 115px;">
                    <li><a href="#"><img src="imgs/3.png" /><span>图片3</span></a></li>
                    </div>

新人学习,请大佬们指点迷津!谢过各位

css

1个回答

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
.type a{ position:relative; display: block; width:100%;margin:0 0 0 0;float:left;height:100%;text-decoration:none;cursor:hand;}
.type a span{display:none;cursor:hand;width:100%;height:100%;font-weight:bold;}
.type a:hover span{background:#000;position:absolute;bottom:0px;left:0;color:#FFF;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;align:center;display: flex;align-items: center;justify-content:center;}
</style>
</head>
<body>
</body>
<div class="type" style="height: 250px;width: 600px;margin: 0px;padding: 0px; background-color: #ff0;  position: absolute;left: 900px;top: 115px;">
<a href="#"><img src="imgs/3.png" /><span>图片3</span></a>
</div>

</body>
</html>

jslang
天际的海浪 回复qq_38197169: 你们之前的li标签没用,要去掉。
7 个月之前 回复
qq_38197169
lzzscl,这个SB 按你的写了,但是图片左上角有一个黑点是怎么回事啊? 可以把那个黑点消了么?
7 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!