影響影響所有在css按鈕

林不知道爲什麼會發生這種情況。如果我懸停一個按鈕，所有按鈕都會應用這種效果，而不是。我只想將效果應用於我懸停的按鈕上。影響影響所有在css按鈕

.buttons{ 
 
    font-family: arial; 
 
    text-decoration: none; 
 
    padding: 10px 15px; 
 
    background: #000; 
 
    color: #fff; 
 
    border-radius: 3px; 
 
} 
 

 

 
.buttons:after{ 
 
\t content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 0%; 
 
    height: 100%; 
 
    background-color: rgba(255,255,255,0.4); 
 
    -webkit-transition: none; 
 
    -moz-transition: none; 
 
    -ms-transition: none; 
 
    -o-transition: none; 
 
    transition: none; 
 
} 
 

 
.buttons:hover:after{ 
 
\t width: 120%; 
 
\t background-color: rgba(255,255,255,0); 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
}

<br><br> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a>

來源

2017-06-05 Jonjie

你嘗試直接添加效果，懸停按鈕標籤（不適用於：元素之後）？ – user14511

yes ............... – Jonjie

你可以在'.buttons :: after'選擇器上放置'transition：0.3s全部放鬆'規則（不在'：hover '），並刪除'transition：none'。該屬性設置過渡效果，所以動畫仍然只會在懸停時發生。我認爲這不會解決你的問題，但它會減少你的代碼。 – chharvey

你width: 120%;在:hover是測量相對於文檔（它是僞元素的offsetParent），而不是按鈕。

添加position: relative;的按鈕，使該偏移家長代替：

.buttons{ 
 
    position: relative; 
 
    font-family: arial; 
 
    text-decoration: none; 
 
    padding: 10px 15px; 
 
    background: #000; 
 
    color: #fff; 
 
    border-radius: 3px; 
 
} 
 

 

 
.buttons:after{ 
 
\t content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 0%; 
 
    height: 100%; 
 
    background-color: rgba(255,255,255,0.4); 
 
    -webkit-transition: none; 
 
    -moz-transition: none; 
 
    -ms-transition: none; 
 
    -o-transition: none; 
 
    transition: none; 
 
} 
 

 
.buttons:hover:after{ 
 
\t width: 120%; 
 
\t background-color: rgba(255,255,255,0); 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
}

<br><br> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a>

來源

2017-06-05 03:20:08 SLaks

你錯過下面的屬性，

更新CSS：

.buttons{ 
    position:relative;/* Add this property */ 
}

.buttons{ 
 
    font-family: arial; 
 
    text-decoration: none; 
 
    padding: 10px 15px; 
 
    background: #000; 
 
    color: #fff; 
 
    border-radius: 3px; 
 
    position:relative; 
 
} 
 

 

 
.buttons:after{ 
 
\t content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 0%; 
 
    height: 100%; 
 
    background-color: rgba(255,255,255,0.4); 
 
    -webkit-transition: none; 
 
    -moz-transition: none; 
 
    -ms-transition: none; 
 
    -o-transition: none; 
 
    transition: none; 
 
    overflow:hidden; 
 
} 
 

 
.buttons:hover:after{ 
 
\t width: 120%; 
 
\t background-color: rgba(255,255,255,0); 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
}

<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a> 
 
<a href="#" class="buttons">Submit</a>

來源

2017-06-05 03:23:56 LKG

影響影響所有在css按鈕

回答

相關問題