.cur_wrap_sidebar ul{ position: fixed; top: 50%; margin-top: -162px; right: 0; z-index: 1000; } .cur_wrap_sidebar ul li{ width: 60px; height: 65px; position: relative; font-size: 16px; color: #fff; list-style: none; } .cur_wrap_sidebar .wrap_btn { border-radius: 2px 0 0 0; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.4); width: 60px; height: 64px; position: absolute; right: 0; background: rgba(53,63,88,0.66); text-align: center; line-height: 64px; cursor: pointer; transition: width 0.3s ease; } .cur_wrap_sidebar ul li:hover .wrap_btn{ background:linear-gradient(to right,#12BFF6,#079FFF); width:110px; height:65px; padding-left: 8px; text-align: left; border-radius: 2px 0 0 2px; border: none; } .cur_wrap_sidebar ul li span{ vertical-align: middle; } .cur_wrap_sidebar .wrap_btn .icon{ font-size: 20px; color: #fff; } .cur_wrap_sidebar ul li:hover span.icon{ margin-right: 8px; } .cur_wrap_sidebar .wrap_btn .text{ display: none; padding-bottom: 1px; } .cur_wrap_sidebar ul li:hover span.text{ display: inline-block; } .cur_wrap_sidebar .wrap_left{ padding-right: 10px; position: absolute; left: -196px; top: 0; visibility: hidden; } .cur_wrap_sidebar ul li:hover .wrap_left{ visibility: visible; transition-property: visibility; -webkit-transition-property: visibility; -o-transition-property: visibility; -moz-transition-property: visibility; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; -moz-transition-delay: 0.2s; } .cur_wrap_sidebar .wrap_left .wrap_img{ padding: 12px; background: rgba(255,255,255,1); box-shadow: 0px 1px 12px 0px rgba(230,230,230,0.5); border: 1px solid rgba(241,243,245,1); padding: 8px 14px; } .cur_wrap_sidebar .wrap_left .wrap_img p { font-size: 12px; color: rgba(89,101,128,1); line-height: 20px; } .cur_wrap_sidebar .wrap_left .wrap_img img { width: 84px; height: 84px; }