链接容器的悬停在转换期间显示为蓝色

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的摘录:(强调我的）

  

＆lt;滤色＆GT;

     

请参阅＆lt; color＆gt;可能的关键字和符号的值。    如果未指定，使用的颜色取决于浏览器 - 它通常是颜色属性的值 ，但请注意，Safari在此情况下当前绘制了透明阴影。 / p>

以上意味着在默认状态下，阴影的颜色是元素的默认颜色，并且将过渡从默认颜色悬停到您的颜色

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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;