element ui tabs 鼠標放在tab上文字左右滑動

本文轉載自查看原文 2019-09-04 16:54 1038 前端相關

 1 // 選項卡關閉按鈕 - 未優化版
 2 $tabs-width: 20px;
 3 // 都不顯示關閉按鈕 - .el-icon-close
 4 .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable .el-icon-close {
 5   width: 14px !important;
 6   opacity: 0;
 7 }
 8 // 選中的顯示關閉按鈕
 9 .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close {
10   width: 14px !important;
11   opacity: 1 !important;
12 }
13 // 如果鼠標放在未選中的tab上，則：顯示關閉按鈕
14 .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close {
15   opacity: 1;
16 }
17 // 選中的padding 為0
18 .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
19   padding: 0 !important;
20 }
21 // 鼠標在選項卡（選中和未選中）上，固定padding
22 .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
23   padding: 0 $tabs-width !important;
24 }
25 // 固定選項卡（選中的）padding
26 .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
27   padding: 0 $tabs-width !important;
28 }
29 
30 // .el-tabs--card > .el-tabs__header .el-tabs__item {
31 //   padding: 0 $tabs-width !important;
32 // }

修改前

修改后：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery文字左右滾動 JS實現文字左右滾動 html js文字左右滾動插件 Taro -- 文字左右滾動公告效果頁碼中的數字和文字左右交替顯示 vue中類tabs左右滑動 Jquery UI Tabs 獲取選中Tab的ID iOS UIButton 圖片文字左右互移位置對調解決方案大神都未必解決的了簡單問題，關於文字左右兩端對齊。原生js鼠標拖拽div左右滑動