时间戳

首页 > 解决方案 > div内悬停图片触发动画

html - div内悬停图片触发动画

问题描述

当我将另一张图片悬停在同一个 div 内时，我试图让动画在潜水内的一张图片上运行。它不起作用。如果我选择#div:hoover，动画正在运行，但如果我选择#picture:hover，则动画不会运行。

http://jsfiddle.net/tvmfjpbc/#&togetherjs=99g0GlPB33

#test {
  position: relative;
  width: auto;
  height: 600px;
  Background: lightblue;
  margin: auto;
}

#cat {
  position: absolute;
  left: 150px;
  top: 0;
  animation-name: cat;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-play-state: paused;
}

#banana:hover #cat {
  animation-play-state: running;
}

@keyframes cat {
  0% {
    left: 150px;
  }
  100% {
    left: 250px;
  }
}
<div id="test">
  <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg">
  <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
</div>

标签： htmlcss

解决方案

#banana:hover+#cat在 CSS 中使用

#test {
  position: relative;
  width: auto;
  height: 600px;
  Background: lightblue;
  margin: auto;
}

#cat {
  position: absolute;
  left: 150px;
  top: 0;
  animation-name: cat;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-play-state: paused;
}

#banana:hover+#cat
 {
  animation-play-state: running;
}

@keyframes cat {
  0% {
    left: 150px;
  }
  100% {
    left: 250px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing</title>
  <link rel="stylesheet" href="test-style.css">
</head>

<body>
  <div id="test">
    <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg" class='hov'>
    <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
  </div>
</body>

</html>

推荐阅读