滑动鼠标，从底部开始，切换显示

by yu lemon

HTML

<div class="main-component">
  <div class="item">
    <div class="item-default">
      <span class="item-title">标题</span>
    </div>
    <div class="item-active">
      <span class="item-title">标题</span>
    </div>
  </div>
</div>

CSS

* {
      padding: 0px;
      margin: 0px;
    }
    body {
      background-color: #F7F9FC;
    }
    .main-component {
      display: inline-block;
      text-align: center;
    }
    .item {
      position: relative;
      display: inline-block;
      width: 250px;
      height: 250px;
      border-bottom: 6px solid #198DC8;
      background-color: #fff;
    }
    .item .item-title {
      position: absolute;
      bottom: 170px;
      left: 0px;
      width: 100%;
    }
    .item .item-active {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 0px;
      overflow: hidden;
      background-color: #198DC8;
      transition: height 0.3s;
    }
    .item .item-active .item-title {
      color: #fff;
    }
    .item.active .item-active{
      height: 100%;
    }

JavaScript

let activeClass = 'active'
    $('.main-component').find('.item').on('mouseenter', function () {
      $(this).addClass(activeClass)
    }).on('mouseleave',function () {
      $(this).removeClass(activeClass)
    })