Hur man gör en muspekaren Pop-Out Textruta i HTML

June 29

Tillsatsen av Cascading Style Sheets (CSS) till HTML förde oöverträffad kontroll över utseendet av synliga element på en webbsida. Den "sväva" pseudo-klassen appliceras på ett element när användarens muspekaren befinner sig över den. Använd "sväva" pseudo-klass för att skapa rullgardinsmenyer och andra dynamiskt föränderliga element. Använd den med en del "textarea" för att skapa en liten textruta som skjuts ut till en större storlek när användaren pekar hans markören på det, ge honom mer utrymme att skriva in.

Instruktioner

1 Placera följande CSS-kod mellan "huvudet" taggarna i HTML-dokument:

<Style type = "text / css">

.popoutwrapper {

position:relative;

}

.poppa ut{

position:absolute;

bredd: 150px;

höjd: 20px;

}

.popout: hover {

width:250px;

höjd: 120 bildpunkter;

vänster: -50px;

top: -50px;

}

</ Style>

2 Lägg till följande kod i kroppen av din HTML-dokument:

<Span class = "popoutwrapper"> <textarea class = "popout"> Ange text här </ textarea> </ span>

3 Spara sidan och ladda den i en webbläsare. Flytta markören över textrutan, och det växer sig större. Skriva in text i den, sedan flytta markören bort. Textrutan krymper tillbaka till sin ursprungliga storlek.

4 Ändra den vanliga storleken på textrutan med "width" och "height" egenskaper i "popout" klass, och dess större format i "popout: hover" pseudo-klassen. Beroende på dess plats på sidan och innehåll kring det, kan delar av den utvidgade rutan ligga utanför det synliga området av fönstret. Detta beror på att "vänster" och "top" egenskaper som används för att hålla den centrerad på plats; ta bort dem för att göra lådan att växa nedåt och åt höger.

Tips

  • Lägg till följande rad till toppen av HTML-dokumentet, innan den första "html" tag, för att säkerställa kompatibilitet med Internet Explorer:
  • <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2020 Astrixsoft.com | Contact us: webmaster# astrixsoft.com