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

Question

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

是否有替代方法来执行此操作以及悬停时导致蓝色背景的原因是什么？

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

See <color> values for possible keywords and notations. If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.

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

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