lzzscl,这个SB 2019-03-02 16:11 采纳率: 81.8%
浏览 1646
已采纳

关于使用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>

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

  • 写回答

1条回答 默认 最新

  • 天际的海浪 2019-03-02 17:01
    关注
    <!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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决