zoukankan      html  css  js  c++  java
  • css鼠标悬浮控制元素隐藏与显示

    在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示。 如下图

    当鼠标移到图片上时,相关的描述从下方显示出来。

    css实现原理与情景:

    • A 是 B 的父元素
    • B 默认隐藏 B{opacity:0,transition: all 0.3s; transform: translateY(100%)}
    • 当鼠标在A上时,即 A:hover状态,B显示 css实现即 A:hover B{opacity:1,translateY(0)}

    示例代码:
    html

    <li class="recommends-content-item">
        <img src="../img/pages/home/img.png" alt="">
        <div class="recommends-content-item__info">
            <h3 class="ellipsis">标题1</h3>
            <p class="ellipsis">描述描述描述描述描描述描述描述描述描述描述描述描述描</p>
        </div>
    </li>
    

    css

    .recommends-content-item{
         33%;
        height: 280px;
        margin-right: 1rem;
        /* height: 15rem; */
        background: #eee;
        position: relative;
    }
    			.recommends-content-item:hover .recommends-content-item__info{
        opacity: 1;
        transform:  translateY(0);
    }
    .recommends-content-item__info{
        position: absolute;
        bottom: 0;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(34,34,34,0.35);
        padding: 0 0.5rem;
        text-align: center;
        overflow: hidden;
         100%;
        box-sizing: border-box;
        transition: 0.3s;
        opacity: 0;
        transform:  translateY(100%);
    }
    

    当然,如果a、b元素有一个相同的父级,同样的原理.father:hover .b { display:block } 就可以实现类似的效果了。

  • 相关阅读:
    python+opencv实现图像自适应阈值的均衡化
    ubuntu添加新的分辨率选项(干货)
    python+opencv检测图像清晰度
    python根据列表创建文件夹,拷贝指定文件
    牛客多校Round 4
    牛客多校Round 3
    HDU多校Round 2
    HDU多校Round 1
    牛客多校Round 2
    牛客多校Round 1
  • 原文地址:https://www.cnblogs.com/csuwujing/p/9949379.html
Copyright © 2011-2022 走看看