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

CSS - nie działa transition

VPS Starter Arubacloud
0 głosów
1,135 wizyt
pytanie zadane 24 kwietnia 2016 w HTML i CSS przez Mavimix Dyskutant (8,390 p.)

Mam kod, który podam niżej, i nie działają mi w ogóle przejścia. Wszystko mam zaincludowane. Co jest nie tak? 

CSS:

[data-title]:hover::after
{
	background-color: rgba(9, 9, 9, 0.9);
	padding: 7px 7px 7px 11px;
	border-radius: 7px;
	color: white;
	content: attr(data-title);
	position: absolute;
	top: 150px;
	left: 375px;
	
	transition-property:  all;
	transition-delay: 10s;
	transition-duration: 1s;
}

[data-title]:hover::before
{
	content: "";
	border-bottom: 50px solid rgba(9, 9, 9, 0.9);
	border-left: 5px solid transparent;
	border-right: 20px solid transparent;
	position: absolute;
	top: 100px;
	left: 400px;
	
	transition-property:  all;
	transition-delay: 10s;
	transition-duration: 1s;
}

HTML:

 

<div id="link" onclick="location.href='index.php'" data-title="Pojawiający się dymek">

 

1 odpowiedź

+1 głos
odpowiedź 24 kwietnia 2016 przez Eimens Maniak (69,240 p.)
wybrane 25 kwietnia 2016 przez Mavimix
 
Najlepsza

No więc tak, w tym wypadku nie możesz tego zrobić w ten sposób. Ja bym to zrobił tak: 

dla 

[data-title]::before,
[data-title]::after {
}

Ustawił opacity: 0; i po najechaniu czyli :hover dał bym opacity :1;

Czyli coś takiego 

[data-title]:hover::before,
[data-title]:hover::after {
}

Pamiętaj żeby dla elementów ::after/::before ustawić  np transition: 300ms; żeby uzyskać efekt przejścia. 

---

warte uwagi

komentarz 25 kwietnia 2016 przez Mavimix Dyskutant (8,390 p.)

Niestety cały czas nie działa:

CSS:

[data-title]:hover::after
{
	background-color: rgba(9, 9, 9, 0.9);
	padding: 7px 7px 7px 11px;
	border-radius: 7px;
	color: white;
	content: attr(data-title);
	position: absolute;
	top: 150px;
	left: 375px;
	opacity: 0;
	
	transition-property:  all;
    transition-delay: 10s;
    transition-duration: 1s;
}

[data-title]:hover::before
{
	content: "";
	border-bottom: 50px solid rgba(9, 9, 9, 0.9);
	border-left: 5px solid transparent;
	border-right: 20px solid transparent;
	position: absolute;
	top: 100px;
	left: 400px;
	opacity: 0;
	
	transition-property:  all;
    transition-delay: 10s;
    transition-duration: 1s;
}

[data-title]:hover::before, [data-title]:hover::after
{
	opacity: 1;
}

HTML:

<div id="link" onclick="location.href='index.php'" data-title="Pojawiający się dymek">

 

komentarz 25 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Raz dla :hover ustawiłeś opacity na 1 a potem na 0 nic dziwnego.

[data-title]:hover::before, [data-title]:hover::after
{
    opacity: 1;
}

Tylko tutaj zostaw :hover wyżej pousuwaj. 

Druga sprawa 


    transition-property:  all;
    transition-delay: 10s;
    transition-duration: 1s;

Opóźnienie 10s trochę dużo :/ zastosuj transition: 300ms; tylko te wyżej usuń. 

komentarz 25 kwietnia 2016 przez Mavimix Dyskutant (8,390 p.)
super, działa. dzięki

Podobne pytania

0 głosów
1 odpowiedź 169 wizyt
pytanie zadane 11 września 2016 w HTML i CSS przez 123skiper Bywalec (2,170 p.)
0 głosów
1 odpowiedź 191 wizyt
pytanie zadane 4 czerwca 2021 w HTML i CSS przez hakiros54 Obywatel (1,160 p.)
0 głosów
1 odpowiedź 142 wizyt
pytanie zadane 3 lutego 2021 w HTML i CSS przez TheWind Nowicjusz (140 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...