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 关于#stm32#的问题:/* User can add his own implementation to report the HAL error return state */
  • ¥15 imageware粗糙度表面
  • ¥15 python使用pulp线性优化时报错
  • ¥15 为什么我的uibot导入py模块出错呀。py文件放在了uibot里对应的python文件夹了,卸了重安也不行
  • ¥15 开源或低价数据中台哪个最好
  • ¥15 arduino编程出现字符串疑似覆盖现象
  • ¥15 我的b站在没有碰到屏幕的情况下偶尔会自动跳出进度条,就像在屏幕上点了一下一样,但我并没有点。而且视频进度并没有变。这可能是什么原因造成的?
  • ¥30 STK matlab python仿真
  • ¥15 关于IMageEnView 图标定位问题
  • ¥20 求解答(matlab)