zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div hover input textarea sollen mit größer werden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.08.2019, 00:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2014
Beiträge: 12
Spike1977 befindet sich auf einem aufstrebenden Ast
Standard 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; }
}
Wie kann man das machen..?
__________________
Hauptsache die Haare liegen!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.08.2019, 19:05
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.918
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du musst sie ansprechen. Dein jetztiger Selektor ist ugültig. Das sollte dir aber auch der Inspektor anzeigen. Wie du es genau machen musst hängt von deinem HTML ab.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.08.2019, 20:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2014
Beiträge: 12
Spike1977 befindet sich auf einem aufstrebenden Ast
Standard

ich muss sie ansprechen? Moment ich mach das Mikrofon an...
Ja wie denn???
__________________
Hauptsache die Haare liegen!
Mit Zitat antworten
  #4 (permalink)  
Alt 24.08.2019, 21:08
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.918
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 26.08.2019, 09:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

CSS ohne HTML ist sinnlos, also ohne dazugehöriges HTML können wir dir nicht helfen sondern nur raten.
Mit Zitat antworten
  #6 (permalink)  
Alt 28.08.2019, 21:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2014
Beiträge: 12
Spike1977 befindet sich auf einem aufstrebenden Ast
Standard

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>&rang;&rang;&rang;&rang;</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!
Mit Zitat antworten
  #7 (permalink)  
Alt 29.08.2019, 07:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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;
    }
Mit Zitat antworten
  #8 (permalink)  
Alt 29.08.2019, 11:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2014
Beiträge: 12
Spike1977 befindet sich auf einem aufstrebenden Ast
Standard

Ach so funktioniert das! Besten DANK!
__________________
Hauptsache die Haare liegen!
Mit Zitat antworten
  #9 (permalink)  
Alt 29.08.2019, 12:49
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.918
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Das lag daran, weil deine Selektoren falsch waren. Das hättest du aber auch Wissen können, wenn du die Seite gelesen hättest die ich dir extra verlinkt habe.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div austauschen bei hover über anderes Div Tingeltangelbob Javascript & Ajax 3 30.04.2013 08:25
DIV Höhe 100% Daniel86 CSS 12 29.07.2011 12:40
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:35 Uhr.