@NorthernMood

Как сделать, чтобы играла музыка при наведении на картинку?

Пересмотрела все сайты, но все равно не пойму какой нужен код. Знаю, как сделать при нажатии, но наведение не выходит, очень нужно решение.
<html>
 <head>
<title>Фантазии</title>
<link rel="stylesheet" href="Фантазии.css">
</head>
<body>

<script>
var Kot= new Audio('Кот.mp3');
</script>

<img src="Кот.png" class="Kot">

</body>
</html>


Если это важно, то в CSS прописано это:
.Kot{left:382px;
     top:353px;
     position: absolute;
     opacity: 1;
     animation: animKot 3s linear infinite;
     transform-origin: center center;
}

@keyframes animKot{
25% {transform: rotate(8deg);opacity: 0;}
50% {transform: rotate(-8deg);opacity: 1;}
75% {transform: rotate(8deg);opacity: 0;}
100% {transform: rotate(0deg);opacity: 1;}
}

Читала, что нужно подключать jquery, но все равно не выходит.
  • Вопрос задан
  • 880 просмотров
Пригласить эксперта
Ответы на вопрос 3
Morpheus_God
@Morpheus_God
Вам нужно ознакомиться с событиями.
События мыши
Ответ написан
Комментировать
Abr_ya
@Abr_ya
Движения мыши
Там есть примеры. Берите тот, что ближе всего к вашему и правьте под свой случай.

Чтобы "навесить" событие на ваш элемент (картинка), нужно получить его в переменную, смотрите тут:
https://learn.javascript.ru/searching-elements-dom

обратите внимание на то, что с изображением можно работать после того, как оно загрузится:
https://learn.javascript.ru/onload-ondomcontentloaded
поэтому я бы использовал обвертку и обращался к ней по id.
Ответ написан
Комментировать
@kur4chyt
Качественный говнокод от производителя
JQUERY
$(".Kot").hover(function(){
Kot.play();
},
function(){
Kot.pause();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы