使用變換和立方貝塞爾擴展標籤

我有5個工作標籤，擴大懸停。在懸停之前，如何擺脫標籤之間的空間，以便標籤彼此相鄰？

我試過了解我所瞭解和研究的一切，但我仍然無法弄清楚。

這裏是我的CSS顏色框：

.nav.nav-justified > li > a > img { 
    max-width: 100%; 
    opacity: 1; 
    -webkit-transform: scale(.9,.9); 
      transform: scale(.9,.9); 
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
      transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
} 
.nav.nav-justified > li.active > a > img, 
.nav.nav-justified > li:hover > a > img, 
.nav.nav-justified > li:focus > a > img { 
    opacity: 1; 
    -webkit-transform: none; 
      transform: none; 
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
      transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
} 
.tab-pane .tab-inner { padding: 30px 0 20px; } 
.tab-li-a {padding:0 !important;}

來源

2016-03-14 Greg Robertson

製作進行更改後，它將給所需的輸出。

.nav.nav-justified > li > a > img { 
    max-width: 100%; 
    opacity: 1; 
    /* -webkit-transform: scale(.9,.9); */ 
    /* transform: scale(.9,.9); */ 
    /* -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); */ 
    /* transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); */ 
}

來源

2016-03-22 14:10:51

謝謝Rukhasana，我加入你的代碼是，我的樣式表，但似乎並沒有工作。它的目標是標籤圖像，但它沒有進行必要的更改，在標籤處於停用狀態時擺脫標籤圖像之間的空間，除非我遺漏了某些東西。還有什麼你認爲可能有用的嗎？ –

這個工作

.nav.nav-justified > li > a > img { 
transition: all .2s ease-in-out; 
} 

.nav.nav-justified > li.active > a > img, 
.nav.nav-justified > li:hover > a > img, 
.nav.nav-justified > li:focus > a > img { 
    transform: scale(1.1); 
    margin-right:31px; 
}

來源

2016-03-25 14:56:29

使用變換和立方貝塞爾擴展標籤

回答

相關問題