Запускать анимацию при наведении курсора внутри div

Я пытаюсь создать анимацию, работающую на одном изображении внутри погружения, когда я нахожу другое изображение внутри того же div. И это не работает. Анимация выполняется, если я выберу #div: hoover, но не, если я выберу #picture: hover.

http://jsfiddle.net/tvmfjpbc/#&to Generaljs=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{ вам нужен знак +, чтобы выбрать братьев и сестер. иначе вы ищете кота внутри банана

— 23.10.2018 08:42

html css

23.10.2018 08:35

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Этот селектор использует общий комбинатор братьев и сестер, который сопоставляет элементы на основе родственных отношений. Этот тип селектора объявляется с помощью символа тильды (~).

Попробуй это:

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

23.10.2018 08:41

использовать #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>

23.10.2018 08:42

Вы определили #cat как потомок #banana в своем 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;
  }
}

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

23.10.2018 08:43

Другие вопросы по теме

Отображение в Internet Explorer: проблема с таблицей

Как залить цвет фона изображения svg в процентах

Показать многоточие справа и выровнять текст по правому краю

(Bootstrap 4) Границы карты отображаются неправильно / отличаются при использовании вместе с bg-color

Я хочу знать, как сделать так, чтобы все мои элементы в навигации располагались равномерно

Анимация Javascript (холст) не работает в firefox, Edge, но работает в Chrome

Создать новый div и увеличить размер при бездействии мыши с помощью jQuery?

React не загружает изображения в Safari, IE или любых мобильных веб-браузерах

Как раскрасить линию на холсте?

Отрицательный z-index не работает в модальном режиме

Запускать анимацию при наведении курсора внутри div

Ответы 3

Другие вопросы по теме

Похожие вопросы