qq_38197169
lzzscl,这个SB
采纳率81.8%
2019-03-02 16:11

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

10
已采纳

图片说明

如图,鼠标移至黄色图片上方,想让图片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条回答

  • jslang 天际的海浪 2年前
    <!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>
    
    
    点赞 评论 复制链接分享

相关推荐