Loading

【CSS记录】隐藏式图文介绍框：鼠标放上后展示更多内容 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="app">
        <div class="message">
            <div class="title">
                隐藏式图文介绍框
            </div>
            <div class="content">
                在中央政治局常委会会议上发表重要讲话，他指出：要提高科学精准防控水平，不断优化疫情防控举措。
            </div>
        </div>
    </div>
</body>
<script>
</script>
<style>
    .app {
        background-color: rgb(125, 171, 197);
        color: aliceblue;
        width: 150px;
        height: 250px;
        /* 为了让文字在一开始的时候处于被隐藏在底部的状态 */
        overflow: hidden;

    }
    .message {
        padding-top: 228px;
        height: 100%;
        transition: all .5s cubic-bezier(.19, 1, .22, 1);
    }
    .app:hover>.message{
        padding-top: 20px;
        background: rgba(8, 88, 94, .8);
    }
</style>
</html>

知识点：

  • overflow：hidden —— 溢出隐藏：如果元素内容的尺寸超出了该元素的尺寸，则会将溢出的部分隐藏不显示
  • transition: all —— 过渡效果：给某个元素设置了过渡属性之后，如果这个元素的的样式发生了变化（如在hover中），那么变化的过程将会采用这个过渡效果来显示
  • .app:hover > .message ——指定其他元素的样式修改：比如这里就是通过app的hover来修改了message的样式
posted @ 2022-03-21 18:03  真正的大英雄  阅读(132)  评论(0)  编辑  收藏  举报