Trigger animation on hovering picture inside div

Question

I am trying to make animation running on one picture inside dive when I hover another picture inside same div. And it doesn't work. Animation is running if I choose #div:hoover but not if I go with #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>

`#banana:hover + #cat{` you need the + sign, to select siblings. else you are looking for the cat, inside the banana — Stender, Oct 23 '18 at 06:42

score 1 · Accepted Answer · answered Oct 23 '18 at 06:41

This selector uses a general sibling combinator matches elements based on sibling relationships. This type of selector is declared using the tilde character (~).

Try this:

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

score 1 · Answer 2 · answered Oct 23 '18 at 06:42

use #banana:hover+#cat in 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>

score 1 · Answer 3 · answered Oct 23 '18 at 06:43

You have defined #cat as a child of #banana in your CSS. You need to define it as a sibling using an adjacent sibling combinator or a 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>

Trigger animation on hovering picture inside div

3 Answers3