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

Question

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

包裹盒子的原因

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

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

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

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

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

Linked container's hover shows blue during transition

html

css

hover