當懸停並單擊使用純CSS時，使活動菜單標記滑動？

我有一個用僞元素創建的標記。我試圖使用transitions 來實現滑動效果，但沒有成功...我一直在尋找解決方案几乎一天..你的幫助將非常感激。 Fiddle here。當懸停並單擊使用純CSS時，使活動菜單標記滑動？

我添加了一個jQuery只是爲了移動活動鏈接，但我的實際代碼根本不使用jQuery。也許有一種方法可以實現使用純CSS的滑動效果。

來源

2015-04-07 jamez88

目前的設置將不起作用，因爲紅色的「標記」是相對於每個父元素（在你的情況下li.active）。動畫僅適用於該元素的相同元素和/或子元素。 – Kay

這可能是一個很好的開始了：FIDDLE.

純CSS javalamp。

來源

2015-04-07 08:15:00

這不可能僅用於轉換。你有多個li，每個都有一個：before元素。通過點擊它們你可以打開/關閉這些元素（它可能會有淡入淡出效果）。你需要的僅僅是一個邊框（跨度或其他），當你點擊li的時候，它會移動它下面的邊框。使用jQuery可以輕鬆完成（例如，當您單擊第三個li時，跨度將向左移動 - > li.first width + li.second width + margin（如果有的話））。我不認爲這可以用CSS來完成。

試試這個：JSFIDDLE我創建功能：

animateBorder();

，並使其更有趣：JSFIDDLE - 2

來源

2015-04-07 08:04:25

感謝您的回答，我會嘗試jQuery，如果你可以建議一個代碼。 – jamez88

當懸停並單擊使用純CSS時，使活動菜單標記滑動？

回答

相關問題