So ändern Sie die Höhe & Breite auf Mouseover
Web-Entwickler nutzen HTML und CSS auf um Websites zu bauen, die in jedem modernen Webbrowser gut aussehen. Diese beiden Technologien gemeinsam, ermöglichen Designern, komplizierte und schöne Webseiten zu erstellen, ohne Rückgriff auf tabellenbasierte Layouts, die für Code unübersichtlich gemacht. CSS erlaubt sogar Designer problemlos Code Auswirkungen wie das Ändern der Höhe und Breite eines Elements, wenn ein Besucher der Website die Maus über das Element bewegt.
Anweisungen
1 Öffnen Sie einen Texteditor. Sie können Editor öffnen, klicken Sie auf im Startmenü und dann Auswahl "Alle Programme", dann "Zubehör", und klicken abschließend auf "Notepad".
2 Geben Sie den folgenden Code um ein rotes Quadrat erstellen, 150 Pixel auf einer Seite.
< html >
<body>
<style>
.block { display: block; height: 150px; width: 150px; background-color: red; }
</style>
<div class="block">
</div>
</body>
< / html >
3 Schließen Sie und speichern Sie das Dokument; Verwenden Sie beim Benennen der Datei die Erweiterung ".html".
4 Öffnen Sie die Datei in einem Webbrowser. Hierzu können Sie die Datei in einem Browser-Fenster ziehen. Es erscheint ein rotes Quadrat.
5 Öffnen Sie die Datei wieder im Editor. Fügen Sie folgenden Code direkt vor dem "< / style >"-Tag.
.Block:hover {Height: 200px; Width: 200px;}
Dieser Code weist das rote Quadrat selbst auf 200 Pixel Größe ändern, wenn der Benutzer "" über dem Element mit seiner Maus schwebt.