Воспроизведение gif и аудио при наведении курсора и пауза при выводе

Воспроизведение gif: В данном случае анимированная подмена уже загружена и анимация начинается сразу же при наведении на нее мышью, без тормозов. Стили - css:

.gif {
	display:block;
	width:150px;
	height:150px;
	background:url('stat.gif') no-repeat; /* Заливаем блок статичной картинкой */
}
/* Начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */

a.gif img {
	visibility:hidden; /* анимация не видна, когда мышь не наведена */
}
	
a.gif:hover {
	background:none; /* фон (статичное изображение) не видно при наведении мыши */
}
	
a.gif:hover img {
	visibility:visible; /* показывается при наведении анимация */
	border:0; /* без обрамления ;) */
}

Вывод изображения - html:

< a class="gif" href="#" >< img src="animation.gif" alt="" / >< /a >

visibility: visible | hidden, предназначен для отображения или скрытия элемента. При скрытии элемента, место, которое элемент занимает, остается за ним. visible — Отображает элемент как видимый. hidden — Элемент становится невидимым - полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. Воспроизведение аудио: Обработчик при наведении курсора на картинку обращается к функции play() а при выводе к pause() src = "meow.mp3"; // Путь к звуковому файлу

< audio id="mysound" src="meow.mp3" >< /audio >
< button onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()" >Hover me!< /button >

Готовый пример (для воспроизведения музыки нужно сначала кликнуть в любом месте страницы):


Код данного примера (нужно убрать лишние пробелы в скобках):

< style >
.gif {
display: block; /* устанавливаем как блочный элемент */
width: 300px; /* задаем ширину */
height: 300px; /* задаем высоту */
background:url('https://i.ibb.co/HHkgzjd/image.png') no-repeat; /* заливаем блок статичной картинкой */
}
/* начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */
a.gif img {
visibility: hidden; /* анимация не видна, когда мышь не наведена */
}
a.gif:hover {
background: none; /* фон (статичное изображение) не видно при наведении курсора */
}
a.gif:hover img {
visibility: visible; /* при наведении курсора показывается анимация */
border: 0; /* без обрамления */
}
< /style >
< a class="gif" href="#" >< img src="https://i.ibb.co/PC8vRBw/image.gif" style="cursor: pointer"  onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()"" >< /a >
< audio id="mysound" src="https://ia601409.us.archive.org/3/items/20220826_20220826_1444/%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B9.mp3" >< /audio >