|
|||
Div-Box einblenden. Wie?
Ich habe eine Div-Box, die zunächst unsichtbar ist und bei Mouseover eingeblendet werden soll. Aber irgendwas mache ich falsch, das Einblenden funktioniert nicht, die Box ist sofort sichtbar. Kann jemand erkennen, wo der Fehler liegt?
Code:
.link .subspalte2 {display: none; opacity: 0} .link:hover .subspalte2 {display: table; opacity: 0.95; transition-duration: 1s; transition-delay: 0.4s; transition: opacity 1s ease-in;} |
Sponsored Links |
|
|||
Wofür wird hier display: table benötigt? Das ist eigentlich ein Wert der nie wirklich gebraucht wird (außer bei Spezialfällen)
Du kannst nicht zwischen display hin- und herschalten, du kannst lediglich die opacity animieren: Code:
<div class="link"> TEXT <div class="subspalte2"> More text </div> </div> ------ .link .subspalte2 { opacity: 0; transition: opacity 1s; } .link:hover .subspalte2 { opacity: 1; } Du kannst zB das Element absolut positionieren. Das ist aber je nach Layout nicht wirklich möglich. |
|
|||
Am besten, ich zeige mal, wie es aussehen soll. Es geht um ein Popup-Fenster, dass über den anderen erscheinen soll.
Deine CSS-Version habe ich ausprobiert, sie funktioniert leider auch nicht, das Fenster wird sofort ohne Verzögerung angezeigt. Display: table wird benötigt, um die Icons (im Beispiel sind es zwei, es können aber auch mehr sein) anzuordnen. |
|
|||
Zitat:
Das war vielleicht im letzten Jahrtausend einmal nötig, mit display: table ordnet man heute keine Bilder mehr an. Bilder werden automatisch ohne dein Zutun schon nebeneinander angezeigt. Du kannst auch flexbox verwenden um Elemente horizontal nach deinen Wünschen anzuordnen. |
|
|||
Zitat:
Code:
<div class="link"> <a href="https://www.amazon.de" target="_blank" rel="noopener"> <div class="linkimage"> <img src="images/amazon.jpg"> </div> <div class="linktext"> Amazon </div> </a> <div class="subspalte2" id="desktop"> <div class="link"> <a href="https://www.amazon.de" target="_blank" rel="noopener"> <div class="linkimage"> <img src="images/amazon.jpg"> </div> <div class="linktext"> Amazon </div> </a> </div> <div class="link"> <a href="https://de.camelcamelcamel.com" target="_blank" rel="noopener"> <div class="linkimage"> <img src="images/ccc.jpg"> </div> <div class="linktext"> Günstigstes Angebot </div> </a> </div> </div> </div> |
|
|||
Egal ob div- oder img-Tags, du brauchst für dein simples Layout keinesfalls display: table. Das ist einfach nur unnötig, da ist es sinnvoller du verwendest moderne Standards:
Zuerst kann deine div-Suppe deutlich reduziert werden: Code:
<div class="link"> <a href="https://www.amazon.de" target="_blank" rel="noopener"> <img class="linkimage" src="images/amazon.jpg"> <p class="linktext"> Amazon </p> </a> <div class="subspalte2" id="desktop"> <a href="https://www.amazon.de" target="_blank" rel="noopener" class="link"> <img src="images/amazon.jpg" class="linkimage"> <p class="linktext"> Amazon </p> </a> <a href="https://de.camelcamelcamel.com" target="_blank" rel="noopener" class="link"> <img src="images/ccc.jpg" class="linkimage"> <p class="linktext"> Günstigstes Angebot </p> </a> </div> </div> Was viel wichtiger ist: divs haben keinerlei Bedeutung, du kannst auch ein a-tag so stylen wie du möchtest. Um zu deinem Ursprungsproblem zurück zu kommen: Für so popups würde ich eine JS-Lösung empfehlen, die so etwas bei Bedarf automatisch generiert. |
|
|||
Sei mir bitte nicht böse, ich finde es wirklich nett, dass Du Dich mit der Optimierung des HTML-Aufbaus beschäftigst. Das geht bestimmt alles auch besser, aber das ist nicht nötig und auch viel zu aufwändig. Ich müsste dann über 200 Einträge umbauen, die eigentlich problemlos funktionieren und außerdem die Stylesheets für alle Elemente und mehrere Bildschirmauflösungen neu justieren.
Ich bin mir sicher, dass meine Herangehensweise nicht der letzte Schrei ist, denn die Seite ist schon ein paar Jahre alt und wird aktuell nur um die Popup-Fenster erweitert, und außerdem bin ich kein Webdesigner, ich wurschtel mich da eher so durch. Die Seite funktioniert prima, das einzige, was nicht funktioniert, ist das Einblenden der Popupfenster. Deswegen möchte ich eigentlich nicht die ganze Seite umbauen. Javascript hatte ich vor sieben Jahren mal in einer dreimonatigen Weiterbildung und habe seit dem nichts mehr damit gemacht und demzufolge auch keine Ahnung mehr. Geändert von Sunlion (18.07.2019 um 16:26 Uhr) |
|
|||
Ich bin dir nicht böse, siehe es einfach als nett gemeinten Hinweis. Sobald du eine Seite hast die auch gut über google gefunden werden soll kannst du dir diesen Hinweis dann zu Gemüte führen (der gilt ja nicht nur für so Popups sondern generell für Websites). So lange die Seite funktioniert und es dir passt kannst du es natürlich so lassen wie du willst.
Wenn du kein JS kannst dann hilft es wohl auch nichts wenn man dir eine Library verlinkt? https://popper.js.org/index.html Aber das wäre der Weg den du nehmen müsstest... |
Sponsored Links |
|
|||
Danke Dir!
Ich habe noch einen weiteren Hinweis erhalten, der in etwa Deinem Code entspricht, der aber trotzdem nicht funktioniert. Also werde ich wohl Grundlagenforschung betreiben müssen und meine Seite mal auf das Nötigste herunterbrechen, um zu sehen, wo der Fehler liegt. Ich melde mich wieder, wenn ich was gefunden habe. Erst mal danke an alle! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 18:04 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 18:17 |