Question

当我在同一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>

Answer 1

此选择器使用常规的同级组合器根据同级关系匹配元素。这种类型的选择器使用波浪号（〜）声明。

尝试一下：

#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">
    <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
  </div>
</body>

</html>

Answer 2

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

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

Answer 3

您已在CSS中将#cat定义为#banana的子级。您需要使用adjacent sibling combinator或general sibling combinator将其定义为同级。

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

在div中的悬停图片上触发动画

3 个答案: