ugrás a tartalomhoz

Form kiemelése és onmouseover

Szűcs József · 2008. Feb. 9. (Szo), 18.06
Van egy Formom(Egy divben). Két szövegbeviteli mezővel és egy gombbal. Hogyan oldhatom meg, hogy ha az egér a form fölött van vagy ha belekattint a beviteli mezőbe akkor a háttér fokozatosan elhalványul és csak a form marad látható.
Hogyan működik a mouseover?
 
1

re

fajtbros · 2008. Feb. 11. (H), 15.48
Önmagában az hogy változzon a form ha fölé viszed az egeret, nagyon egyszerű.

Készíts a form elemhez egy stílust, (pl .form), adj neki háttérszínt. Ezután készíts újabb stílust .form:hover néven, és adj neki másik háttérszínt. Így ha az egeret fölé viszed, a hover állapotra vált, ha leviszed visszatér az alaphoz.

Az elhalványodás effekt csak css-el nem megoldható, kétféleképp lehet: vagy bevonsz valamilyen javascript segédletet, vagy pedig készítesz egy 1x1-es mozgó gifet, ami a két szín között vált, majd beállítod a hover állapot hátterének.
2

Re

Szűcs József · 2008. Feb. 12. (K), 00.14
De én pont azt szeretném, hogy a formom ne változzon, viszont minden más legyen halvány.
4

ie

juhasztibi · 2008. Feb. 12. (K), 16.52
A .form:hover nem fog menni ie alatt, ezt csak js-el tudod megoldani. js-el adod hozzá, illetve veszed el a megfelelő stílusokat a megfelelő eseményekre.

t
3

Cover

s_volenszki · 2008. Feb. 12. (K), 14.38
Pontosan nem értem, de ha olyasmire gondolsz, mint a startlapon amikor a belépést választod, akkor kell csinálnod egy áttetsző hátterű div-et, alapban display:none (és még sok más) stílus paraméterrel.

Az űrlapodat is div-be teszed de annak a Z-indexét nagyobbra állítod, mint a "takaró" div-nek. Amikor belekattintasz a szövegbeviteli mezőbe, akkor megjeleníted a "takarót".

Ha azt akarod, hogy halványodjon, akkor kis késleltetéssel hivogathatsz rekurzíve egy rutint, ami folyamatosan sötétebb és sötétebb hátteret biztosít a "takarónak".

Azért ez elég felületes, de ez is egy logika a megvalósításra.

s_volenszki
5

Itt a megoldás!

PogiG · 2008. Feb. 13. (Sze), 09.00
Ajánlom figyelmedbe ezt az oldalt, biztos találsz megoldást a problémádra:


http://prototype-window.xilinus.com/samples.html