• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed :hover nie działający na całym elemencie i brak animacji po zjechaniu kursorem z elementu

VPS Starter Arubacloud
0 głosów
219 wizyt
pytanie zadane 21 stycznia 2020 w HTML i CSS przez Człowiek Początkujący (350 p.)
zamknięte 21 stycznia 2020 przez Człowiek

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);
}

 

komentarz zamknięcia: Rozwiązano
komentarz 21 stycznia 2020 przez lapa19904 Stary wyjadacz (11,560 p.)
Nie dawaj spacji między klasa a ":" czyli

.option-first:hover {}

Nie styluj po id tylko po klasach.

1 odpowiedź

+1 głos
odpowiedź 21 stycznia 2020 przez RobertBaj Użytkownik (810 p.)
wybrane 21 stycznia 2020 przez Człowiek
 
Najlepsza

Kolega wyżej dobrze prawi, zapamiętaj to sobie. Przeanalizuj sobie kod poniżej. Pare rzeczy zmieniłem i działa chyba tak jak potrzebujesz.

HTML:

<!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="" class="hover-eff" ><span>Link 1 Lorem Ipsum</span></a>
    <a href="" class="hover-eff different-class" ><span>Link 2 Lorem Ipsum</span></a>
    <a href="" class="hover-eff" ><span>Link 3 Lorem Ipsum</span></a>
</body>
</html>

CSS:

	@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 {		
	 height:100vh;
    margin: 0px;
    padding: 0px;
    background-color: #788286;
    font-size: 48px;
    text-align: center;
    color: #bcb3b5;
    font-weight: bold;
}

span:nth-child(1),span:nth-child(2), span:nth-child(3) {
	height:90vh;
	vertical-align: middle;
	display:table-cell;
	line-height:1.5;
}
.hover-eff:nth-child(1) {
	margin-left:18%;
}
.hover-eff {
	  transition: all 0.4s linear;
		position:relative;
		text-align: center;
		vertical-align: middle;
    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;
    color: #bcb3b5;
    text-decoration: none;
}

.different-class {
	background-color: #3e4333;
}

a.hover-eff:hover
{
    animation: bounce13 0.4s;
    background-color: #93abb1;
    -webkit-transform: translateY(-5px);
    transform: translateY(-20px);
}

 

komentarz 21 stycznia 2020 przez Człowiek Początkujący (350 p.)
Dziękuję, wszystko działa

Podobne pytania

0 głosów
1 odpowiedź 512 wizyt
pytanie zadane 17 listopada 2016 w HTML i CSS przez Sedki Początkujący (250 p.)
0 głosów
3 odpowiedzi 3,152 wizyt
0 głosów
2 odpowiedzi 295 wizyt
pytanie zadane 8 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,250 p.)

93,081 zapytań

142,045 odpowiedzi

321,464 komentarzy

62,427 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...