GIF не отображается, когда я нажимаю на него, поделитесь своими идеями [закрыто] ⇐ CSS

[Anonymous]

Если вы посетите этот веб-сайт, вы заметите, что при нажатии на изображение подарка гифка отсутствует, только при наведении на нее курсора. Я хочу, чтобы эта гифка показывалась, потому что я буду использовать ее на мобильных телефонах, поэтому не наводите курсор, это исходный код мой GitHub Я думаю, проблема в коде JavaScript или CSS, вот HTML с js и кодом CSS











Today is your birthday

24 years old



Here's how happy I am for you today
(Click or hover over the gift)



How people react when you enter the room



If I had to describe you with ONE word



The only person as badass as you



This one's for you, my friend



Want to create your own Birthday GIFt site? Take this HTML & CSS course.




//this changes the date to the current date (dynamic)
const dateContainer = document.getElementById('dateContainer');
const currentDate = new Date();
const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
const formattedDate = currentDate.toLocaleDateString(undefined, options);
dateContainer.textContent = formattedDate;

function showGif(id, gifUrl) {
const giftImage = document.getElementById(id);
giftImage.style.backgroundImage = `url('${gifUrl}')`;
giftImage.style.backgroundSize = "cover";
}



body {
text-align: center;
font-family: 'Happy Monkey', cursive;
background: linear-gradient(#a2d2ff, #EFB0C9);
color: #ffffff;
}

h1, h2, h3, h4, p {
text-shadow: 0 0 1px black;
}

#bff-img {
width: 150px;
border-radius: 50%;
border: 6px solid #EFB0C9;
margin-bottom: 10px;
}

#bday-age {
background: #EFB0C9;
padding: 5px 10px;
border-radius: 5px;
margin: 5px 0 10px 0;
}

.bday-date {
margin: 0;
background: #EFB0C9;
padding: 5px 10px;
border-radius: 5px;
}

#header {
display: flex;
flex-direction: column;
align-items: center;
}

.gift-section {
margin-top: 50px;
}

.gift-title {
margin-bottom: 10px;
}

.gift-hint {
margin-top: 0;
}

#gift-img-cheers {
height: 200px;
}

.gift-img {
margin: 20px auto;
max-width: 400px;
height: 400px;
border: 6px solid white;
border-radius: 10px;
background-image: url("images/gift-cover.jpg");
background-size: cover;
}

#gift-img-happy:hover {
background-image: url(/images/happy.gif);
}

#gift-img-hot:hover {
background-image: url("/images/hoty.webp");
}

#gift-img-genius:hover {
background-image: url("images/genius.gif");
}

#gift-img-badass:hover {
background-image: url("/images/giphy.webp");
background-size: auto;
}

#gift-img-cheers:hover {
background-image: url("images/cheers.gif");
}

#footer {
font-style: italic;
width: 400px;
margin: 40px auto 20px;
}

a {
color: white;
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... your-ideas