带鼠标悬浮特效的CSS响应式价格表

一款带鼠标悬浮特效的CSS响应式价格表，默认中间一个价目卡片为选中项，每一个价格表都有一个鼠标的悬停特效，突出显示并增加阴影等，样式可以自由调整，喜欢的小伙伴们请收下吧。

分类：选项卡/滑动门 > 列表切换难易：初级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分仅需引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分结构比较清晰，div容器里放入多个li标签，基本一看就懂，代码如下：

<div class="flex-container">
  <div class="flex-item">
    <ul class="package">
      <li class="header">基础版</li>
      <li class="gray">¥ 29/月</li>
      <li>20GB 存储空间</li>
      <li>100 域名</li>
      <li>1TB 数据流量</li>
      <li>1000 邮件推送</li>
      <li class="gray">
        <button>加入购物车</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
    <ul class="package">
      <li class="header highlight">专业版</li>  
      <li class="gray">¥ 59/月</li>
      <li>100GB 存储空间</li>
      <li>500 域名</li>
      <li>2TB 数据流量</li>
      <li>1000 邮件推送</li>
      <li class="gray">
        <button>加入购物车</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
   <ul class="package">
      <li class="header">尊享版</li>
      <li class="gray">¥ 99/月</li>
      <li>250GB 存储空间</li>
      <li>500 域名</li>
      <li>5TB 带宽</li>
      <li>1000 邮件推送</li>
      <li class="gray">
        <button>加入购物车</button>
      </li>
    </ul>
  </div>
</div>