Question

我试图在光标同时徘徊时显示动画。留下图像链接，但由于某种原因，只要我的光标离开图像，就不会出现动画：

＆＃13;

.soc {
  display: block;
  font-size: 0;
  list-style: none;
  margin: 0;
  text-align: center;
}
.soc li {
  display: inline-block;
  margin: 12px;
  margin: 1.2rem;
}
.soc a, .soc svg {
  display: block;
}
.soc a {
  position: relative;
  height: 50px;
  height: 5.0rem;
  width: 50px;
  width: 5.0rem;
}
.soc svg {
  height: 100%;
  width: 100%;
}
.soc em {
  font-size: 14px;
  line-height: 1.5;
  margin-top: -0.75em;
  position: absolute;
  text-align: center;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
}
.icon-twitter:hover {
  border-radius: 100%;
  color: #fff;
  fill: #fff;
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
  transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
  transition: background-color 0.5s, transform 0.5s ease-out;
  transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}

.icon-twitter
 {
  color: #000;
  fill: #000;
}
.icon-twitter:hover {
  background: #00aced;
}

＆＃13;

<ul class="soc">       
  <li><a href="#" class="icon-twitter" title="Twitter">
    <svg viewBox="0 0 512 512">
      <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
    </svg>
    <!--[if lt IE 9]><em>Twitter</em><![endif]--></a></li>
</ul>

＆＃13;

Answer 1

将过渡属性放在元素本身上，而不是悬停状态。否则，当元素没有悬停时，它不会影响元素。

＆＃13;

.soc {
  display: block;
  font-size: 0;
  list-style: none;
  margin: 0;
  text-align: center;
}

.soc li {
  display: inline-block;
  margin: 12px;
  margin: 1.2rem;
}

.soc a,
.soc svg {
  display: block;
}

.soc a {
  position: relative;
  height: 50px;
  height: 5.0rem;
  width: 50px;
  width: 5.0rem;
}

.soc svg {
  height: 100%;
  width: 100%;
}

.soc em {
  font-size: 14px;
  line-height: 1.5;
  margin-top: -0.75em;
  position: absolute;
  text-align: center;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
}

.icon-twitter {
  color: #000;
  fill: #000;
  border-radius: 100%;
  transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
  transition: background-color 0.5s, transform 0.5s ease-out;
  transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
}

.icon-twitter:hover {
  color: #fff;
  fill: #fff;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  background: #00aced;
}

＆＃13;

<ul class="soc">
  <li>
    <a href="#" class="icon-twitter" title="Twitter">
      <svg viewBox="0 0 512 512">
      <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
    </svg>
      <!--[if lt IE 9]><em>Twitter</em><![endif]--></a>
  </li>
</ul>

＆＃13;

悬停后图像不显示动画

1 个答案: