链接容器的悬停在过渡期间显示为蓝色

Question

我有三个充当链接的容器。出于某种原因，每当您将鼠标悬停在它们上方时，这些块就会变成蓝色一秒钟，然后变为它们的悬停颜色（深灰色）。我唯一能想到它为什么这样做是因为它是一个链接。我希望整个盒子成为一个链接，这就是我用链接包裹盒子的原因。

是否有其他方法可以做到这一点，以及悬停时导致蓝色背景的原因是什么？

#info {
	max-width: 80%;
	height: auto;
}
#info-container {
	padding: 10px 10% 200px 10%;
	margin: 50px 10%;
}
.box {
	width: 20%;
	height: 300px;
	opacity:1;
	position: absolute;
	line-height: 1.5em;
}
#green, #yellow, #red {
	box-shadow: inset 0 0 0 0;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
#green {
	background: #3e745b;
	left: 15%;
}
#yellow {
	background: #6f9697;/*#f3db6d*/
	left: 40%;
}
#red {
	background: #3e745b;
	left: 65%;
}
#green:hover, #yellow:hover, #red:hover {
	/*box-shadow: inset 0 300px 0 0 #6f9697;*/
	box-shadow: inset 0 300px 0 0 #303030;
}
#green.green{animation:slideinGreen .5s ease}
#yellow.yellow{animation:slideinYellow 1.3s ease}
#red.red{animation:slideinRed 2s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
  from {
    left: calc(25% - 250px);opacity:1;
  }
}
@keyframes slideinYellow{
  from {
    left: calc(45% - 350px);opacity:1;
  }
}
@keyframes slideinRed {
  from {
    left: calc(65% - 450px);opacity:1;
  }
}
.info-box-title, .info-box-description {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #FFF;
	line-height: 1.4em;
}
.info-box-title {
	font-size: 2em;
}
.box:hover .info-box-title {
	display: none;
}
.info-box-description {
	display: none;
	font-size: 1.5em;
	width: 75%;
	line-height: 1.5em;

}
.box:hover .info-box-description {
	display: block;
}

<section id="info">
			  <article id="info-container">
				<a href="projects"><div id="green" class="box">
					<div class="info-box-title">PROJECT AFTER PROJECT</div>
					<div class="info-box-description">Over 60 years of accumulated projects.</div>
				</div></a>
				<a href="about"><div id="yellow" class="box">
					<div class="info-box-title">YEARS OF DEMOLITION HISTORY</div>
					<div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
				</div></a>
				<a href="contact"><div id="red" class="box">
					<div class="info-box-title">GET IN TOUCH WITH US</div>
					<div class="info-box-description">Contact us for more information.</div>
				</div></a>
			  </article>
			</section>

Answer 1

原因：

目前，您没有为处于未悬停状态的box-shadow 指定颜色。

#green, #yellow, #red {
  box-shadow: inset 0 0 0 0; /* there is no color specified */
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

如果没有指定，大多数浏览器使用当前颜色。以下是来自MDN 的摘录：（强调我的）

请参阅 值以了解可能的关键字和符号。 如果未指定，则使用的颜色取决于浏览器 - 通常是 color 属性的值，但请注意，Safari 当前在这种情况下会绘制透明阴影。

上面的意思是，在默认状态下，阴影的颜色是元素的默认颜色，并且在悬停时，它会从默认颜色过渡到您指定的颜色（因为所有属性正在过渡），因此您会看到蓝色。

对于a 标签，大多数浏览器的默认颜色是蓝色（在Chrome 中是color: rgb(0, 0, 238);）。具有 box-shadow 的 div 没有明确指定颜色，因此它会继承父级的颜色。

---

解决方案：将预期颜色设置为处于未悬停状态的box-shadow。

#info {
  max-width: 80%;
  height: auto;
}
#info-container {
  padding: 10px 10% 200px 10%;
  margin: 50px 10%;
}
.box {
  width: 20%;
  height: 300px;
  opacity: 1;
  position: absolute;
  line-height: 1.5em;
}
#green,
#yellow,
#red {
  box-shadow: inset 0 0 0 0 #303030;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  transition: all ease 0.3s;
}
#green {
  background: #3e745b;
  left: 15%;
}
#yellow {
  background: #6f9697;
  /*#f3db6d*/
  left: 40%;
}
#red {
  background: #3e745b;
  left: 65%;
}
#green:hover,
#yellow:hover,
#red:hover {
  /*box-shadow: inset 0 300px 0 0 #6f9697;*/
  box-shadow: inset 0 300px 0 0 #303030;
}
#green.green {
  animation: slideinGreen .5s ease
}
#yellow.yellow {
  animation: slideinYellow 1.3s ease
}
#red.red {
  animation: slideinRed 2s ease
}
#green.active,
#red.active,
#yellow.active {
  opacity: 1
}
@keyframes slideinGreen {
  from {
    left: calc(25% - 250px);
    opacity: 1;
  }
}
@keyframes slideinYellow {
  from {
    left: calc(45% - 350px);
    opacity: 1;
  }
}
@keyframes slideinRed {
  from {
    left: calc(65% - 450px);
    opacity: 1;
  }
}
.info-box-title,
.info-box-description {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #FFF;
  line-height: 1.4em;
}
.info-box-title {
  font-size: 2em;
}
.box:hover .info-box-title {
  display: none;
}
.info-box-description {
  display: none;
  font-size: 1.5em;
  width: 75%;
  line-height: 1.5em;
}
.box:hover .info-box-description {
  display: block;
}

<section id="info">
  <article id="info-container">
    <a href="projects">
      <div id="green" class="box">
        <div class="info-box-title">PROJECT AFTER PROJECT</div>
        <div class="info-box-description">Over 60 years of accumulated projects.</div>
      </div>
    </a>
    <a href="about">
      <div id="yellow" class="box">
        <div class="info-box-title">YEARS OF DEMOLITION HISTORY</div>
        <div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
      </div>
    </a>
    <a href="contact">
      <div id="red" class="box">
        <div class="info-box-title">GET IN TOUCH WITH US</div>
        <div class="info-box-description">Contact us for more information.</div>
      </div>
    </a>
  </article>
</section>