Witam. Niedawno rozpocząłem tworzenie strony internetowej. Strona główna miała składać się z trzech linków, które prowadzą do podstron. Linki te miały być wysokie na 90% wysokości strony i odpowiednio wyśrodkowane zarówno w pionie, jak i w poziomie. To udało mi się zrobić. Kłopoty pojawiły się, gdy dodałem do css selektor :hover. W założeniu po najechaniu na te linki, miały one podnieść się i zmienić kolor tła, a po zjechaniu z nich kursorem wrócić do poprzedniego stanu, wszystko to za pomocą trwających 0,4s animacji. Pierwszy problem polega na tym, że :hover działa tylko, gdy najadę na tekst w tych linkach, a nie działa na pustych polach nad i pod nimi, które cały czas należą do tagu a, ale nie do tagu span. Drugi problem to brak animacji powrotu. Gdy kursor opuści pole linku, wraca on natychmiastowo do stanu pierwotnego, bez wyświetlenia animacji. Zauważyłem jednak, że gdy strona się załaduje, animacja zostanie wyświetlona poprawnie. Wygląda to tak, jakby :hover nadpisywał poprawnie tę animację, ale zwykły styl już nie. Poniżej kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap&subset=latin-ext" rel="stylesheet">
</head>
<body>
<a href="" id="option1"><span>Link 1 Lorem Ipsum</span></a>
<a href="" id="option2"><span>Link 2 Lorem Ipsum</span></a>
<a href="" id="option3"><span>Link 3 Lorem Ipsum</span></a>
</body>
</html>
@keyframes bounce13
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);
background-color: #515c54;
}
100%
{
background-color: #93abb1;
-webkit-transform: translateY(-5px);
transform: translateY(-20px);
}
}
@keyframes bounce2
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);
background-color: #3e4333;
}
100%
{
background-color: #93abb1;
-webkit-transform: translateY(-5px);
transform: translateY(-20px);
}
}
body
{
margin: 0px;
padding: 0px;
background-color: #788286;
font-size: 48px;
text-align: center;
color: #bcb3b5;
font-weight: bold;
}
#option1
{
animation: bounce13 0.4s reverse;
background-color: #515c54;
width: 20%;
margin-left: 18%;
float: left;
font-family: 'Cutive Mono', monospace;
height: 90vh;
line-height: 90vh;
cursor: pointer;
margin-top: 5vh;
display: block;
color: #bcb3b5;
text-decoration: none;
}
#option1 span
{
line-height: 1.5;
display: inline-block;
vertical-align: middle;
margin-left: 5%;
margin-right: 5%;
}
#option1 :hover
{
animation: bounce13 0.4s;
background-color: #93abb1;
-webkit-transform: translateY(-5px);
transform: translateY(-20px);
}
#option2
{
animation: bounce2 0.4s reverse;
background-color: #3e4333;
width: 20%;
margin-left: 2%;
float: left;
font-family: 'Cutive Mono', monospace;
height: 90vh;
line-height: 90vh;
cursor: pointer;
margin-top: 5vh;
display: block;
color: #bcb3b5;
text-decoration: none;
}
#option2 span
{
line-height: 1.5;
display: inline-block;
vertical-align: middle;
margin-left: 5%;
margin-right: 5%;
}
#option2 :hover
{
animation: bounce2 0.4s;
background-color: #93abb1;
-webkit-transform: translateY(-5px);
transform: translateY(-20px);
}
#option3
{
animation: bounce13 0.4s reverse;
background-color: #515c54;
width: 20%;
margin-left: 2%;
float: left;
font-family: 'Cutive Mono', monospace;
height: 90vh;
line-height: 90vh;
cursor: pointer;
margin-top: 5vh;
display: block;
color: #bcb3b5;
text-decoration: none;
}
#option3 span
{
line-height: 1.5;
display: inline-block;
vertical-align: middle;
margin-left: 5%;
margin-right: 5%;
}
#option3 :hover
{
animation: bounce13 0.4s;
background-color: #93abb1;
-webkit-transform: translateY(-5px);
transform: translateY(-20px);
}
:hover nie działający na całym elemencie i brak animacji po zjechaniu kursorem z elementu
