顯示父母懸停的範圍並僅使用CSS隱藏延遲

我需要在鏈接懸停時顯示span，並在2秒後將其隱藏在鼠標懸停上。以下是我所做的代碼。這可以使用JS完成。但是，我需要CSS唯一解決方案。顯示父母懸停的範圍並僅使用CSS隱藏延遲

當前速度顯示的跨度是完美的。我只需要在2秒後隱藏鼠標。

.hoverBox span { 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 
.hoverBox:hover span { 
 
    opacity: 1; 
 
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

來源

2016-07-14 Tushar

我不認爲它與只是作爲我們不能把邏輯的CSS CSS是可行的。 – Lekhnath

您可以添加第三個參數過渡

.hoverBox span { 
 
    opacity: 0; 
 
    transition: opacity 0.5s 1s; 
 
} 
 
.hoverBox:hover span { 
 
    opacity: 1; 
 
    transition: opacity 0.5s; 
 
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

來源

2016-07-14 13:36:29

當然，你可以用CSS動畫輕鬆獲得此行爲。 2s動畫播放時間發生在0.5s不透明度轉換後，因此如果您希望整個播放時間爲兩秒鐘，則可以將動畫時間更改爲1.5s。

.hoverBox span { 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 
.hoverBox:hover span { 
 
    opacity: 1; 
 
    animation: glimpse 2s linear; 
 
    animation-fill-mode: forwards; /* This is to make it only play once */ 
 
} 
 
@keyframes glimpse { 
 
    0% { opacity: 1; } 
 
    99% { opacity: 1; } 
 
    100% { opacity: 0; } 
 
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

來源

2016-07-14 13:29:34 TylerH

這不是我要找的。 2秒後它應該隱藏在鼠標外面。反正謝謝你的嘗試。 – Tushar

@Tushar啊，那是相關的信息:-P在這種情況下，即使是過渡調整也會像Matej的回答一樣起作用。 – TylerH

您可以使用transition-delay使2秒後消失：

.hoverBox span { 
    opacity: 0; 
    transition: opacity 0.5s; // or transition:opacity 0.5s 2s; the 3rd param is the delay. 
    transition-delay:2s; 
} 
.hoverBox:hover span { 
    opacity: 1; 
    transition-delay:0s; 
}

https://jsfiddle.net/bk9vnubx/

來源

2016-07-14 13:39:40 pawel

顯示父母懸停的範圍並僅使用CSS隱藏延遲

回答

相關問題