單擊下划線動畫

Question

我正在嘗試在描述中重新創建動畫並在此處查看 。 當鏈接未被點擊時，下划線從右到左動畫，下划線在它消失之前從左到右動畫。

 a { color:#00f; text-decoration:none; display:inline-block; } a:after { width: 0; display:block; background:#00f; height:3px; transition: all .5s ease-in-out; content:""; } a:hover { color:#00f; } a:hover:after { width:100%; } 

 <a href="#">Click first</a> <a href="#">Click second</a> 

Answer 1

1. 使用偽元素上的position 。 添加position: relative對於a ，和position: absolute to :after 。

2. 使用bottom和right定位偽元素。 這意味着該行來自右側。

3. 在懸停/單擊時，添加left屬性。 這使得線條跨越整個寬度。 寬度從左到右從0到100%增長。

當您“取消懸停”或再次單擊時， left被移除，並且該行再次從右側開始，因此寬度在該方向上減小。

 $('a').on('click', function() { $('a').not(this).removeClass('underline'); $(this).toggleClass('underline'); }); 

 a { color: #00f; text-decoration: none; display: inline-block; position: relative; } a:after { width: 0; background: #00f; height: 3px; transition: all .5s ease-in-out; content: ""; position: absolute; bottom: -5px; right: 0; } a.underline:after { width: 100%; left: 0; } a:hover:after { width: 100%; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Click first</a> <a href="#">Click second</a> 

Answer 2

也許你想要一個HTML / CSS唯一的解決方案：

 a { color: #00f; text-decoration: none; display: inline-block; } a span:after { width: 0; display: block; background: #00f; height: 3px; transition: all .5s ease-in-out; content: ""; float: right; } a span:focus { color: #00f; } label:hover { cursor: pointer; } label input { display: none; } label input:checked + span:after, label input + span:hover:after { width: 100%; float: left; } label input:checked + span { color: #00f; } 

 <a href="#"> <label> <input type="radio" name="link" /> <span> Click first </span> </label> </a> <a href="#"> <label> <input type="radio" name="link" /> <span> Click second </span> </label> </a> 

Answer 3

您可以使用以下內容。 只需使用一個類來設置樣式。

 $('a').click(function(e){ $(this).siblings().removeClass('start'); $(this).toggleClass('start'); e.preventDefault(); }) 

 a { color:#00f; text-decoration:none; display:inline-block; } a:after { width: 0; display:block; background:#00f; height:3px; transition: all .5s ease-in-out; content:""; float:right; } a:hover { color:#00f; } a.start:after { width: 100%; } a:hover:after { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Click first</a> <a href="#">Click second</a>