CSS - nie działa transition

Question

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">

 

Answer 1

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

Comments

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">

 

---

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ń. 

---

super, działa. dzięki