CSS/HTML - 轉換不會觸發

我有一個LI列表，其中包含錨鏈接，這將在懸停時獲得圍繞它們的邊框。我想使用每當鏈接徘徊轉變作風，使邊框顏色便於CSS/HTML - 轉換不會觸發

這是我在做什麼。

.sidemenu li a { 
    transition: border-color 2s ease; 
    -webkit-transition: border-color 2s ease; 

} 

.sidemenu li a:hover { 
    border:1px solid #27AE60; 

}

雖然這並不工作 - 當徘徊，它只是立即出現。

請參閱this JSFIDDLE for reference

來源

2015-02-10 oliverbj

那是因爲你沒有一個初始值，使"from-to"過渡，試試這個：

.sidemenu li a { 
 
    transition: border-color 2s ease; 
 
    -webkit-transition: border-color 2s ease; 
 
    border:1px solid transparent; 
 
} 
 
.sidemenu li a:hover { 
 
    border: 1px solid #27AE60; 
 
}

<div class="sidemenu-container"> 
 
    <ul class="sidemenu"> 
 
    <li class="head">Account Overview</li> 
 
    <li> 
 
     <a href="#"><i class="ic ic-pulse"></i> My Account</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2015-02-10 16:09:55 DaniP

我複製你的確切代碼 - 仍然無法正常工作。儘管它在你發佈的代碼片段中起作用。 – oliverbj 2015-02-10 16:15:00

@oliverbj小提琴的作品太http://jsfiddle.net/v1zswam8/1/ ...我只是加入'邊界'屬性的初始狀態。 – DaniP 2015-02-10 16:16:05

你必須這樣做這樣：

.sidemenu li a { 
     border: solid 1px #fff; 
     -webkit-transition: border 2s; 

    } 

    .sidemenu li a:hover { 
     -webkit-transition: border 2s; 
     border:1px solid #27AE60; 

    }

來源

2015-02-10 16:11:38 geekth

您需要定義一個透明的邊框能夠看到的過渡，所以：

.sidemenu li a { 
    /* add this line */ 
    border:1px solid transparent; 
    transition: border-color 2s ease; 
    -webkit-transition: border-color 2s ease; 
}

更新小提琴http://jsfiddle.net/v1zswam8/3/

來源

2015-02-10 16:17:36

CSS/HTML - 轉換不會觸發

回答

相關問題