如何使我的轉換停留在活動鏈接上？

我想要在我的菜單中添加線條動畫，並且我有，但是我想讓動畫停留在活動鏈接上。如何使我的轉換停留在活動鏈接上？

我的代碼：

.menu ul li:before { 
    content: ""; 
    display: block; 
    width: 0%; 
    color: #f7f7f7; 
    border-top: 1px solid transparent; 
    border-image-slice: 1; 
    transition: width .5s ease-in-out 0s; 
    margin-bottom: 5px; 
} 
.menu ul li:focus:before, 
.menu ul li:hover:before { 
    color: #f7f7f7; 
    border-top: 1px solid transparent; 
    border-image: linear-gradient(to right, #529ecc , #9CF5A6); 
    border-image-slice: 1; 
    width: 100%;

編輯：我加了。主動，但我覺得我必須進入這個JavaScript的，因爲我不想讓動畫在處於活動狀態的鏈接 - >那麼當我將鼠標懸停在活動鏈接上時，我都有兩個動作加上動畫加動畫。

有源代碼：

.menu ul li.active { 
    color: #f7f7f7; 
    border-top: 1px solid transparent; 
    border-image: linear-gradient(to right, #529ecc , #9CF5A6); 
    border-image-slice: 1; 
    margin-bottom: 5px;

來源

2017-04-20 SadFrodo

做到這一點'了'元素上，而不是，或'tabindex'屬性添加到LIS，使他們能夠接收焦點，然後使用'：active' pseudoselector。 – TricksfortheWeb

我認爲你錯誤理解'：active'，'：active'是你按下/點擊鏈接時的調用，它會停止並轉到鏈接，這並不意味着你當前的鏈接。 – aahhaa

'：active'工作一個鏈接。當你還在點擊鏈接時。按下並且它會起作用，但只要你擡起手指，鏈接就不再有效。' – blackandorangecat

這是一種回答......這可能會幫助你實際上想要做的事情。這將對您點擊的任何鏈接應用一個類，讓您按自己喜歡的方式進行設置。它使用jQuery，但如果需要，它可以用純粹的javascript來書寫。它也可以用PHP或其他一些服務器端腳本語言完成。

CSS psudo-class :active不適用於您正在嘗試的操作。

編輯：將:not(.active)添加到css規則，以便它不適用於active鏈接。在我的編輯中更改了代碼。

$(document).on("click", ".menu li a", function(e) { 
 
    //This removes the `active` class from all `a` 
 
    $(".menu li a").removeClass("active"); 
 

 
    //This adds the `active` class to the `a` that was clicked on 
 
    $(this).addClass("active"); 
 
});

.active { 
 
    background: #ffbf00; 
 
} 
 

 
.menu ul li a:not(.active):before { 
 
    content: ""; 
 
    display: block; 
 
    width: 0%; 
 
    color: #f7f7f7; 
 
    border-top: 1px solid transparent; 
 
    border-image-slice: 1; 
 
    transition: width .5s ease-in-out 0s; 
 
    margin-bottom: 5px; 
 
} 
 
.menu ul li a:not(.active):focus:before, 
 
.menu ul li a:not(.active):hover:before { 
 
    color: #f7f7f7; 
 
    border-top: 1px solid transparent; 
 
    border-image: linear-gradient(to right, #529ecc , #9CF5A6); 
 
    border-image-slice: 1; 
 
    width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='menu'> 
 
    <ul> 
 
    <li><a href='#'>Page 1</a></li> 
 
    <li><a href='#'>Page 2</a></li> 
 
    <li><a href='#'>Page 3</a></li> 
 
    <li><a href='#'>Page 4</a></li> 
 
    </ul> 
 
</div>

來源

2017-04-20 17:21:54 blackandorangecat

它沒有幫助;當我將鼠標懸停在活動鏈接上時，我不想懸停動畫來顯示，只是在其餘鏈接上顯示;我嘗試了一些javascript：（文件）.on（「hover」，「.menu li a」，函數（e）{（「。menu li a」）。removeClass（「hover」）; $（this）.addClass（「active」）; }）; 但我不知道如何：/ – SadFrodo

@SadFrodo我不知道你是什麼意思...我的例子沒有懸停的風格。 – blackandorangecat

是的，我知道，但也許你可以幫助我 - 我有兩個班級：一個有轉換，當我將鼠標懸停在菜單項上時，第二個是活動班，當某個項目處於活動狀態時，是在它上面;但與此同時，當我將鼠標懸停在活動項目上時，懸停動畫顯示 - 我不希望那個 – SadFrodo

其實:active selector隻影響時，它的點擊的元素，然後將消失，鏈接，只要你釋放它得到其最初的風格。

解決方案：

您需要使用自定義類例如active並與您的有源元件使用它，您將設置它在你的CSS這樣的：

.menu ul li.active{ 
     //Your style goes here 
}

但你會需要JavaScript才能在單擊的li元素中切換此類。

來源

2017-04-20 17:11:38

如何使我的轉換停留在活動鏈接上？

回答

相關問題