Autor Zpráva
robbie
Profil *
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*/
        }
</head>
<body>
<img class="one" src="img/stul.jpg" width="40" height="40" >
</body>
</html>
Tomáš123
Profil
robbie:
Rozmery prvku nastavuj mimo udalosti :hover.
robbie
Profil *
Tomáš123:
nevím jak to udělat, se přiznám
Bubák
Profil
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ý, ale vyžaduje zbytočne zložitú štruktúru kódu. Pardón, pozostatok; najprv mi nenapadlo, že pretečenie 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
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
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 *
Děkuji Vám moc za pomoc. Fakt dík. Smekám
robbie
Profil *
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
Seznam všech CSS 3 selektorů
Tomáš123
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: