Hvordan lage en Mouse Pop-Out tekstboks i HTML

Tillegg av Cascading Style Sheets (CSS) til HTML brakt enestående kontroll over utseendet på synlige elementer på en webside. Den "svever" pseudo-klasse er brukt på et element når brukeren holder musepekeren over den. Bruk "sveve" pseudo-klasse for å lage drop-down menyer og andre dynamisk endring av elementer. Bruk den med en "textarea" element for å skape en liten tekstboks som spretter ut til en større størrelse når brukeren peker han markøren på det, noe som gir ham mer plass til å skrive på.

Bruksanvisning

1 Plasser følgende CSS-kode mellom "hodet" kodene i HTML-dokumentet:

<Style type = "text / css">

.popoutwrapper {

position:relative;

}

.Poppe ut{

position:absolute;

width: 150px;

height: 20px;

}

.popout: hover {

width:250px;

height: 120px;

venstre: -50px;

top: -50px;

}

</ Style>

2 Legg til følgende kode i kroppen av HTML-dokumentet:

<Span class = "popoutwrapper"> <textarea class = "ventilasjons"> Skriv inn tekst her </ textarea> </ span>

3 Lagre siden og legg den i en nettleser. Flytt musepekeren over tekstboksen, og det blir større. Skriv inn tekst i den, så flytter du markøren bort. Tekstboksen krymper tilbake til sin opprinnelige størrelse.

4 Endre vanlig størrelse på tekstboksen med "bredde" og "høyde" egenskaper i "ventilasjons" klasse, og dens forstørret størrelse i "ventilasjons: hover" pseudo-klasse. Avhengig av sin plassering på siden og innholdet rundt det, kan deler av forstørret boksen ligge utenfor det synlige området av vinduet. Dette er fordi de "venstre" og "topp" egenskaper blir brukt til å holde den sentrert på plass; fjerne dem for å gjøre boksen til å vokse nedover og til høyre.

Hint

• Legg til følgende linje til toppen av HTML-dokumentet, før den første "html" tag, for å sikre kompatibilitet med Internet Explorer:
• <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">