| Autor | Zpráva | ||
|---|---|---|---|
| robbie Profil * |
#1 · Zasláno: 19. 4. 2016, 15:05:09
Ahoj zdravím vás
,chci se optat, mám tento css styl a po najetí myši se mi všechny obrázky se třídou .one posunou jakoby dolu a konkrétní obrázek, co je na něm kurzor se zvětší. Pomůže někdo, jak upravit css styl, aby se obrázky s třídou .one neposouvaly dolu , zůstaly na svém místě a ten konkrétní obrázek, jez je na něm kurzor by se zvětšil , kdekoliv na stránce. Děkuji <html> <head> .one:hover {
width: 70px;
height: 70px;
transform:scale(1.1);
-webkit-transform: scale(1.1); /*Chrome,Safari*/
-moz-transform: scale(1.1); /*Moz*/
-o-transform: scale(1.1); /*OPERA*/
-ms-transform: scale(1.1); /*IE9*/
}<body> <img class="one" src="img/stul.jpg" width="40" height="40" > </body> </html> |
||
| Tomáš123 Profil |
#2 · Zasláno: 19. 4. 2016, 15:25:16
robbie:
Rozmery prvku nastavuj mimo udalosti :hover.
|
||
| robbie Profil * |
#3 · Zasláno: 19. 4. 2016, 15:48:33
Tomáš123:
nevím jak to udělat, se přiznám |
||
| Bubák Profil |
#4 · Zasláno: 19. 4. 2016, 17:12:43
Tomáš123:
„Rozmery prvku nastavuj mimo udalosti :hover.“
Vždyť je robbie má nastavené, ale při hoveru je mění, a to způsobuje poskakování. |
||
| Tomáš123 Profil |
Bubák:
Problém som pochopil tak, že robbie chce iba zväčšiť prvok. To zariadi transform. Nie je potrebné ešte aj meniť rozmery...
robbie: „nevím jak to udělat, se přiznám“ Hm, mal som na mysli odstrániť riadky 2 a 3 z kódu, ktorý si dodal vyššie. Totiž, povedal by som, že efekt zväčšenia prvku je možné vykonať dvoma metódami: – cez transform: scale()
– cez zmenu rozmerov, pričom by bolo nutné: • nastaviť nové rozmery, • vyňať prvok z toku dokumentu, aby neovplyvňoval pozíciu nasledujúcich prvkov (typicky pomocou absolútneho poziciovania), • zariadiť, aby nasledujúci prvok rešpektoval priestor, ktorý mal zaberať zväčšovaný prvok a neposunul sa nahor. Pripravil som ukážku druhej metódy. Postup je použiteľný marginu sa dá ošetriť pomocou overflowu.
Myslím, že tvoje riešenie je akousi kombináciou týchto dvoch postupov. Stačí si vybrať jednu cestu (skôr by som ti odporúčil prvú, jednoduchšiu, z nich). |
||
| Keeehi Profil |
#6 · Zasláno: 20. 4. 2016, 22:15:25
Tomáš123:
> • vyňať prvok z toku dokumentu, aby neovplyvňoval pozíciu nasledujúcich prvkov (typicky pomocou absolútneho poziciovania), > • zariadiť, aby nasledujúci prvok rešpektoval priestor, ktorý mal zaberať zväčšovaný prvok a neposunul sa nahor. Místo tohoto celého by mělo stačit nastavit správně velký záporný margin. Žádné pozicování, žádné odsazování následujících prvků. |
||
| Tomáš123 Profil |
#7 · Zasláno: 21. 4. 2016, 15:35:50
Keeehi:
Máš pravdu, ďakujem za lepšiu alternatívu. Relatívne poziciovanie ale bude potrebné, aby nebol zväčšený prvok prekrytý nasledujúcim divom.
|
||
| robbie Profil * |
#8 · Zasláno: 21. 4. 2016, 17:56:06
Děkuji Vám moc za pomoc. Fakt dík. Smekám
|
||
| robbie Profil * |
#9 · Zasláno: 21. 4. 2016, 19:27:13
Jeste jsem se chtel zeptat, jak si mam vyložit tuhle část kodu:
.obal div:hover + div { /* konkretne nechapu +div*/
margin-top: 110px;
}Dekuji |
||
| Bubák Profil |
#10 · Zasláno: 21. 4. 2016, 19:58:23
|
||
| Tomáš123 Profil |
#11 · Zasláno: 21. 4. 2016, 20:03:56
robbie:
Nenavrhol som dobré riešenie. Alternatíva od Keeehiho je použiteľnejšia. Ukážka. Selektor, na ktorý sa pýtaš, vyberie div, ktorý nasleduje priamo za divom, cez ktorý sa prechádza myšou.
|
||
|
Časová prodleva: 8 let
|
|||
0