为什么我的 CSS 动画会因悬停在错误的元素上而触发？

Question

将鼠标悬停在单个元素上时，我希望照片消失而文本出现，以及我已经实现的框阴影动画。

问题是，当我在顶行的前两个元素中的任何一个上来回悬停时，会触发底行元素的动画，整个菜单都会出现抖动！

您可能需要在整页中查看代码段才能看到。

有什么解决办法吗？

/* ----------------------------------------------
 * Generated by Animista on 2018-8-7 19:10:49
 * w: http://animista.net, t: @cssanimista 
 * ---------------------------------------------- */


/**
 * ----------------------------------------
 * animation shadow-pop-br
 * ----------------------------------------
 */

.shadow-pop-br {
  -webkit-animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@-webkit-keyframes shadow-pop-br {
  0% {
    box-shadow: 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  100% {
    box-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red, 6px 6px red, 3px 3px red, 8px 8px red;
    -webkit-transform: translateX(-8px) translateY(-8px);
    transform: translateX(-8px) translateY(-8px);
  }
}

h1 {
  font-family: Lato;
  font-weight: bold;
  font-size: 48px;
  text-align: center;
  margin: auto;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 50px;
  max-width: 960px;
  margin: 0px auto;
}

.container:hover {
  display: flex;
}

.overlay-title {
  color: black;
  opacity: 0;
  font-size: 30px;
  font-family: Lato;
  font-weight: bold;
  position: absolute;
  width: 75%;
  top: 38%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.overlay-description {
  color: black;
  opacity: 0;
  font-size: 20px;
  font-family: Lato;
  position: absolute;
  width: 75%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.card1 {
  position: relative;
  display: flex;
  height: 300px;
  width: 275px;
  border-radius: 3px;
  background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
  background-position: center;
  background-size: 250px;
  background-repeat: no-repeat;
}

.card-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 178px;
}

.card1:hover {
  animation: shadow-pop-br;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  background-image: none;
}

.card1:hover .overlay-title {
  opacity: 1;
}

.card1:hover .overlay-description {
  opacity: 1;
}

.card2 {
  position: relative;
  display: flex;
  height: 300px;
  width: 275px;
  border-radius: 3px;
  background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
  ;
  background-position: center;
  background-size: 250px;
  background-repeat: no-repeat;
  margin-left: 30px;
  margin-right: 30px;
}

.card2:hover {
  animation: shadow-pop-br;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  background-image: none;
}

.card2:hover .overlay-title {
  opacity: 1;
}

.card2:hover .overlay-description {
  opacity: 1;
}

.card3 {
  display: flex;
  height: 300px;
  width: 275px;
  border-radius: 3px;
  background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
  background-position: center;
  background-size: 100px;
  background-repeat: no-repeat;
}

.card3:hover {
  animation: shadow-pop-br;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  background-image: none;
}

.card3:hover .overlay-title {
  opacity: 1;
}

.card3:hover .overlay-description {
  opacity: 1;
}

.card4 {
  display: flex;
  height: 300px;
  width: 275px;
  border-radius: 3px;
  background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
  ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px;
  margin-right: 15px;
}

.card4:hover {
  animation: shadow-pop-br;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  background-image: none;
}

.card4:hover .overlay-title {
  opacity: 1;
}

.card4:hover .overlay-description {
  opacity: 1;
}

.card5 {
  display: flex;
  height: 300px;
  width: 275px;
  border-radius: 3px;
  background-image: url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc);
  ;
  background-position: center;
  background-size: 250px;
  background-repeat: no-repeat;
  margin-left: 15px;
}

.card5:hover {
  animation: shadow-pop-br;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  background-image: none;
}

.card5:hover .overlay-title {
  opacity: 1;
}

.card5:hover .overlay-description {
  opacity: 1;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Portfolio Animations</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="sickmoves.css">
</head>

<body>
  <h1>Recent Projects</h1>
  <div class="container">
    <a href="" class="card1">
      <section class="overlay"></section>
      <div class="overlay-title">Vroozi</div>
      <div class="overlay-description">Landing Page Redesign</div>
    </a>
    <a href="" class="card2">
      <section class="overlay"></section>
      <div class="overlay-title">dailyplanet.info</div>
      <div class="overlay-description">Responsive Design</div>

    </a>
    <a href="" class="card3">
      <section class="overlay"></section>
      <div class="overlay-title">ToiLit</div>
      <div class="overlay-description">Native App Design</div>
    </a>
    <a href="" class="card4">
      <section class="overlay"></section>
      <div class="overlay-title">Yelp</div>
      <div class="overlay-description">Feature Integration</div>
    </a>
    <a href="" class="card5">
      <section class="overlay"></section>
      <div class="overlay-title">Kura Sushi</div>
      <div class="overlay-description">User Research</div>
    </a>
  </div>
  <script src="" async defer></script>

</body>

</html>

Answer 1

在你的代码中使用这个：

.container > a { position:relative; }

您没有在所有 'a' 标签上使用它，这就是它发生的原因。

为什么我的 CSS 动画会因悬停在错误的元素上而触发？

Why are my CSS animations triggered by hovering over the wrong element?

css

animation

hover

transitions