Nauč se s námi víc. Využij 50% bonus na e-learningové kurzy.
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
discount week 50
Avatar
marcopolo2542001:26.7.2015 22:58

Ahoj,

mám v css daný kód :

.button{
    transition: height 2s;
    height: 100px;
}

.button:hover {
    height: 300px;
}

jde nějak udělat aby se mi po :hoveru napsal tam dole nějaký text ?
Mam samozdřejmě i další css v buttonu..Zajímá mě jen ten text...

Editováno 26.7.2015 22:59
 
Odpovědět
26.7.2015 22:58
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na marcopolo2542001
Jan Lupčík:26.7.2015 23:07

Můžeš použít vlastnost content (a pokud není :hover, nastavit ji prázdnou) nebo si vytvoř v tlačítku span s textem, který při nenajetí bude skrytý a při najetí bude viditelný (vlastnost display).

Nahoru Odpovědět
26.7.2015 23:07
TruckersMP vývojář
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jan Lupčík
marcopolo2542001:26.7.2015 23:16

Díky moc..
Může to být nějak takto ?

.button{
    transition: height 2s;
    height: 100px;
    content : none;
}

.button:hover {
    height: 300px;
    content: Muj text..;
}
Editováno 26.7.2015 23:17
 
Nahoru Odpovědět
26.7.2015 23:16
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na marcopolo2542001
Jan Lupčík:27.7.2015 8:44

Ono to funguje jen s :after či :before. Úprava by mohla vypadat následovně:

.button {
    transition: height 2s;
    height: 100px;
}

.button:after {
    content: none;
}

.button:hover:after {
    height: 300px;
    content: "Můj text.";
}
Nahoru Odpovědět
27.7.2015 8:44
TruckersMP vývojář
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.