僞元素「箭頭」的目標CSS過渡？

Question

我有一個DIV與「箭頭」的底部，不象從漫畫書語音泡，其出現在懸停狀態：

箭頭與:after和:before創建僞元素。

我有一個爲邊框顏色和框陰影懸停的過渡。

我的問題是，「箭頭」只是「出現」。不會像其他項目一樣褪色，但我無法弄清楚如何瞄準「箭頭」。 「全部」看起來不正確。

理想情況下，我很樂意在箭頭上進行延遲，並簡單地淡入淡出或擦除。

這裏的CSS：

.item-selector-button { 
    position: relative; 
    text-align: center; 
    cursor: pointer; 
    border: 1px solid #cecece; 
    padding: 15px; 
    border-radius: 0; 
    color: #000; 
    width: 160px; 
    height: 120px; 
    transition: all ease-in-out 0.1s, box-shadow ease-in-out 0.1s; 
} 

.item-selector-button .title { 
    color: #3e53a4; 
    font-size: 12px; 
    margin: 0; 
    padding-top: -3px; 
    font-family: "PrecisionSans_W_Md", "Helvetica Neue", Arial, sans-serif; 
} 

.item-selector-button .divider { 
    height: 1px; 
    width: 20px; 
    background-color: #cecece; 
    margin: 4px auto 10px; 
} 

.item-selector-button .image { 
    background: #fff url("../images/box.png") center center no-repeat; 
    width: 64px; 
    height: 57px; 
    margin: 4px auto; 
} 

.item-selector-button:hover, .item-selector-button.hover { 
    padding: 14px; 
} 

.item-selector-button:hover:after, .item-selector-button.hover:after { 
    content: ""; 
    position: absolute; 
    bottom: -12px; 
    left: 68px; 
    border-width: 12px 12px 0; 
    border-style: solid; 
    border-color: #fff transparent; 
    transition-delay: 0.3s; 
} 

.item-selector-button:hover:before, .item-selector-button.hover:before { 
    content: ""; 
    position: absolute; 
    bottom: -15px; 
    left: 65px; 
    border-width: 15px 15px 0; 
    border-style: solid; 
    border-color: #3e53a4 transparent; 
    transition-delay: 0.3s; 
} 

.item-selector-button:active, .item-selector-button.active { 
    border-width: 2px; 
    border-color: #3e53a4; 
    background-color: #3e53a4; 
} 

.item-selector-button:active:before, .item-selector-button.active:before { 
    content: ""; 
    position: absolute; 
    bottom: -15px; 
    left: 65px; 
    border-width: 15px 15px 0; 
    border-style: solid; 
    border-color: #3e53a4 transparent; 
    transition-delay: 0.3s; 
} 

.item-selector-button:active .title, .item-selector-button.active .title { 
    color: #fff; 
} 

.item-selector-button:active .divider, .item-selector-button.active .divider { 
    background-color: #fff; 
} 

.item-selector-button:active .image, .item-selector-button.active .image { 
    background-color: #3e53a4; 
} 

.item-selector-button:active:hover, .item-selector-button.active:hover { 
    padding: 15px; 
    box-shadow: none; 
} 

.item-selector-button:active:hover:after, .item-selector-button.active:hover:after { 
    content: ""; 
    position: absolute; 
    bottom: -12px; 
    left: 68px; 
    border-width: 12px 12px 0; 
    border-style: solid; 
    border-color: #3e53a4 transparent; 
    transition-delay: 0.3s; 
} 

.item-selector-button.disabled { 
    pointer-events: none; 
    cursor: not-allowed; 
} 

.item-selector-button.disabled .title { 
    color: #c3c3c3; 
} 

.item-selector-button.disabled .image { 
    background-image: url("../images/box-disabled.png"); 
} 

.item-selector-button.disabled:hover { 
    padding: 15px; 
    border: 1px solid #cecece; 
    box-shadow: none; 
} 

Answer 1

您只需懸停元素pseudoelements，因此沒有從/過渡。您需要在非懸停狀態元素上添加僞元素。

實施例過渡能見度：

.item-selector-button:before { 
    .arrow-inside(...); 
    transition:all 5s ease; 
    transition-delay: 0.3s;  
    visibility:hidden; 
} 

.item-selector-button:after { 
    .arrow-outside(...); 
    transition:all 5s ease; 
    transition-delay: 0.3s;  
    visibility:hidden; 
} 

.item-selector-button:hover:before { 
    visibility:visible; 
} 

.item-selector-button:hover:after { 
    visibility:visible; 
} 

當然