懸停的背景部分通過

我有一個懸停效果，將新的background-color移動到現有的懸浮效果上，使背景顯示背景正在淡出。由於某種原因，background-color位於塊的左側。懸停的背景部分通過

我能想到的唯一的事情就是我的黑色邊框，但我在元素自然風格中設置了邊框。

有誰知道這是什麼原因造成的？

#service-tabs-left { 
 
\t float: left; 
 
\t margin-left: 150px; 
 
} 
 
#service-tabs-right { 
 
\t float: right; 
 
\t margin-right: 150px; 
 
} 
 

 
.service-tab-block { 
 
\t position: relative; 
 
\t font-size: 1.6em; 
 
\t padding: 1em 25px; 
 
\t text-align: center; 
 
\t display: block; 
 
\t margin: 30px 0; 
 
\t cursor: pointer; 
 
    border: 1px solid #838557; 
 
\t background-image: linear-gradient(to right, #000 50%, #838557 50%); 
 
\t background-size: 200% 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-position: bottom right; 
 
\t transition:width 0.2s ease; 
 
\t -webkit-transition:width 0.2s ease; 
 
} 
 
.service-tab-block.active { 
 
\t background: #000; 
 
\t color: #FFF; 
 
} 
 

 
.service-tab-block:hover { 
 
\t -webkit-transition: all 0.2s ease-in; 
 
\t transition: all 0.2s ease-in; 
 
\t background-position: bottom left; 
 
\t color: #FFF; 
 
\t border: 1px solid #000; 
 
}

<div id="service-tabs-left"> 
 
\t \t \t <h1 class="service-tab-block" id="service_tab1">DEMOLITION</h1> 
 
\t \t \t <h1 class="service-tab-block" id="service_tab2">ENVIRONMENTAL SOLUTIONS</h1> 
 
\t \t \t <h1 class="service-tab-block" id="service_tab3">CONCRETE CRUSHING</h1> 
 
\t \t </div> 
 
\t \t <div id="service-tabs-right"> 
 
\t \t \t <h1 class="service-tab-block" id="service_tab4">ASSET RECOVERY</h1> 
 
\t \t \t <h1 class="service-tab-block" id="service_tab5">SCRAP METAL RECYCLING</h1> 
 
\t \t \t <h1 class="service-tab-block" id="service_tab6">FOUNDATION REMOVAL</h1> 
 
\t \t </div>

來源

2016-05-31 Becky

對我來說，它的工作以及 – Mojtaba

@Mojtaba最後三個箱子，你會看到左邊黑色的邊框。 – Becky

我嘗試過Chrome和FF。沒有多餘的邊框 – Mojtaba

你必須在background-size財產從200％變爲201％。額外的1％給你需要的封面。

https://jsfiddle.net/o7sxoton/

來源

2016-05-31 21:15:49 gwar9

謝謝！這是做 – Becky

我改變爲黑色的線性漸變至49％的.service-tab-block

BTW固定它，這是你可以通過調整您的瀏覽器縮小的人誰不知道看到這些問題之一。

.service-tab-block { 
    background-image: linear-gradient(to right, #000 49%, #838557 50%);

來源

2016-05-31 21:18:42 Rooster

我試過這是我的小提琴，如果你改變漸變到49％的過渡不再完成，你會看到矩形右側的一些綠色。 – gwar9

設置此：

.service-tab-block{ 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
}

來源

2016-05-31 21:20:33 Medda86

懸停的背景部分通過

回答

相關問題