激活：页面加载时图片库上的悬停效果

Question

我的网站上有一个部分，其中包含爆头图片。当您将它们悬停时，图片会发生变化。这是一个非常酷的效果，但是因为该部分位于页面底部...人们可能不会注意到您可以将鼠标悬停在图像上以查看效果。

因此，我想知道...有没有办法通过 javascript 将悬停效果逐个应用到每个图像，因此它们无需执行 mouseover 事件即可更改？然后，当您将鼠标悬停在图像上时，动画会暂停......并返回正常的 :hover 状态。

我尝试了很多不同的方法，包括使用这种技术：http://jsfiddle.net/3R92G/2/，但无济于事...

任何帮助都会很棒。

.person {
  width: 300px;
  padding: 62px 0 0 80px;
  margin: auto;
  position: relative;
}

.person-badge {
  width: 70px;
  height: 105px;
  border-radius: 0 0 100px 100px;
  overflow: hidden;
  transform: rotate(0deg);
  position: absolute;
  top: 0;
  left: 0;
}

.person-badge:before,
.person-badge:after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  z-index: -1;
  width: 70px;
  height: 70px;
  background: #DDD;
  background: linear-gradient(to bottom, #EEE 0%, #CCC 100%);
  transition: 500ms;
}

.person-badge:after {
  background: linear-gradient(to top, #557ebb 0%, #55bbad 100%);
  opacity: 0;
}

.person:nth-child(2) .person-badge:after {
  background: linear-gradient(to top, #bb557b 0%, #6055bb 100%);
}

.person:nth-child(3) .person-badge:after {
  background: linear-gradient(to top, #FC0 0%, #F88 100%);
}

.person:nth-child(4) .person-badge:after {
  background: linear-gradient(to top, #cacc68 0%, #55bb95 100%);
}

.person:nth-child(5) .person-badge:after {
  background: linear-gradient(to top, #6055bb 0%, #bb557b 100%);
}

.person:nth-child(6) .person-badge:after {
  background: linear-gradient(to top, #FC0 0%, #8fbb55 100%);
}

.person:nth-child(7) .person-badge:after {
  background: linear-gradient(to top, #ff9c47 0%, #e253b9 100%);
}

.person-badge:hover:after {
  opacity: 1;
}

.person-badge img {
  width: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 500ms;
}

.person-badge img.peculiar {
  opacity: 0;
  transform: translateY(80px)
}

.person-badge:hover img.normal {
  opacity: 0;
  transform: translateY(80px)
}

.person-badge:hover img.peculiar {
  opacity: 1;
  transform: translateY(0)
}

.person h3 {
  margin: 0;
  Font-family: "rooney-web", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
}

strong {
  color: #888;
  margin: px 0 5px 0;
  font-size: .8em;
  position: absolute;
}

<div class="person">
  <div class="person-badge">
    <img class="normal" src="/images/person1-a.png">
    <img class="peculiar" src="/images/person1-b.png">
  </div>
  <h3>Person-1</h3><strong>maid of honor</strong>
</div>
<div class="person">
  <div class="person-badge">
    <img class="normal" src="/images/person2-a.png">
    <img class="peculiar" src="/images/person2-b.png">
  </div>
  <h3>Person 2</h3>
</div>
<div class="person">
  <div class="person-badge">
    <img class="normal" src="/images/person3-a.png">
    <img class="peculiar" src="/images/person3-b.png">
  </div>
  <h3>Person 3</h3>
</div>
<div class="person">
  <div class="person-badge">
    <img class="normal" src="/images/person4-a.png">
    <img class="peculiar" src="/images/person4-b.png">
  </div>
  <h3>Person 4</h3>
</div>
<div class="person">
  <div class="person-badge">
    <img class="normal" src="/images/person5-a.png">
    <img class="peculiar" src="/images/person5-b.png">
  </div>
  <h3>Person 5</h3>
</div>
</div>

Answer 1

如果你的 css :hover 可以工作，就让它去吧。 对于 javascript： element.classList.add('effect-class'); setTimeout(function(){ element.classList.remove('normal-class'); }, 1000); 但是您需要在 css 中为每个效果创建类！