一部分的翱翔背景来临

Question

我有一个悬停效果，可以在现有的background-color上移动新的background-color，使背景显示为向右淡化。出于某种原因，#service-tabs-left { float: left; margin-left: 150px; } #service-tabs-right { float: right; margin-right: 150px; } .service-tab-block { position: relative; font-size: 1.6em; padding: 1em 25px; text-align: center; display: block; margin: 30px 0; cursor: pointer; border: 1px solid #838557; background-image: linear-gradient(to right, #000 50%, #838557 50%); background-size: 200% 100%; background-repeat: no-repeat; background-position: bottom right; transition:width 0.2s ease; -webkit-transition:width 0.2s ease; } .service-tab-block.active { background: #000; color: #FFF; } .service-tab-block:hover { -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; background-position: bottom left; color: #FFF; border: 1px solid #000; }的一部分显示在块的左侧。

我唯一能想到的就是我的黑色边框，但我的元素是自然风格的边框。

有谁知道造成这种情况的原因是什么？

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

Math.atan2

Answer 1

您必须将background-size属性从200％更改为201％。额外的1％为您提供所需的封面。

https://jsfiddle.net/o7sxoton/

Answer 2

我通过在.service-tab-block

上将黑色的线性渐变更改为49％来修复它 顺便说一句，这是你可以看到的问题之一，你可以通过调整浏览器缩放来解决任何想知道的问题。

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

Answer 3

设置：

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