|
|||
Div hover input textarea sollen mit größer werden
Ich will das die Felder größer werden wenn man die Div hovert.
So geht es schon mal nicht... Code:
#mySidenav a:hover { left: 0; input { font-size: 1rem; width: 188px; height: auto; padding: 0.3rem; } textarea { font-size: 1rem; width: 190px; height: auto; padding: 0.3rem; } }
__________________
Hauptsache die Haare liegen! |
Sponsored Links |
|
||||
Das habe ich doch geschrieben, dass kommt auf dein HTML an und das kenne ich nicht.
Brauchst du eine Einführung in CSS Selektoren? https://wiki.selfhtml.org/wiki/CSS/Selektoren |
|
|||
Code:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); body { font-family: 'Roboto Mono', monospace; font-size: 1rem; } #nav a { position: fixed; left: -330px; transition: 0.5s; padding: 1rem; width: 340px; height: auto; text-decoration: none; font-size: 1rem; color: white; border-radius: 0 15px 15px 0; top: 10px; background-color: #555 } /* Das hier geht nicht so... Wie könnte das funktionieren. */ #nav a:hover { left: 0; input { width: 287px; } /* geht nicht... */ textarea { width: 288px; } /* geht nicht... */ } input { width: 1px; height: auto; font-family: 'Roboto Mono', monospace; font-size: 1rem; padding: 0.3rem; } textarea { width: 1px; height: 140px; font-family: 'Roboto Mono', monospace; font-size: 1rem; padding: 0.3rem; } button { font-family: 'Roboto Mono', monospace; font-size: 1rem; } .Aussehen { top: 10px; background-color: #555 } spitze {text-align: right;display:block;} </style> </head> <body> <div id="nav" class="Aussehen"> <a href="#" > <spitze>⟩⟩⟩⟩</spitze> <br> <input placeholder="Name" ></input><br> <input placeholder="Nachname" ></input><br> <input placeholder="Telefon" ></input><br> <textarea placeholder="Text..." ></textarea> <br> <button>OK</button> </a> </div> <div style="margin-left:80px;"> <h2>Test...</h2> <p>Test... Test... </p> </div> <script> </script> </body> </html>
__________________
Hauptsache die Haare liegen! |
|
|||
Teste mal diesen CSS Code...
HTML-Code:
#nav a:hover { left: 0; } #nav a:hover input { width: 287px; transition: all 0.5s; } #nav a:hover textarea { width: 288px; transition: all 0.5s; } input { width: 1px; height: auto; font-family: 'Roboto Mono', monospace; font-size: 1rem; padding: 0.3rem; transition: all 0.5s; } textarea { width: 1px; height: 140px; font-family: 'Roboto Mono', monospace; font-size: 1rem; padding: 0.3rem; transition: all 0.5s; } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Div austauschen bei hover über anderes Div | Tingeltangelbob | Javascript & Ajax | 3 | 30.04.2013 09:25 |
DIV Höhe 100% | Daniel86 | CSS | 12 | 29.07.2011 13:40 |
CSS Navigation - Problem mit IE6 | pcklinik | CSS | 4 | 18.09.2007 13:04 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 15:40 |