mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 08.07.2020 02:46 Benutzername: Passwort: Auto-Login

Thema: CSS Inhalt - Hover vom 12.04.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Inhalt - Hover
Autor Nachricht
kramsen
Threadersteller

Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht: Männlich
Verfasst Di 12.04.2011 14:55
Titel

CSS Inhalt - Hover

Antworten mit Zitat Zum Seitenanfang

Ich komm einfach nichtmehr drauf, auf welche Weise ich diesen Text nur im Hover-Zustand anzeigen lassen kann.

Ich habe mal eben ein Beispiel erstellt, um es euch zu veranschaulichen:

http://vil.li/2p9y76

Code:

<html>
<head>
<style>

body {

background-color: #000000;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}

#menu {
background-color: #D6D6D6;
width: 100%;
height: 20px;
bottom: 0px;
left: 0px;
position: absolute;
}

#menu:hover {
height: 85px;
background-color: #D6D6D6;


}
</style>
</head>
<body>
<div id="menu">Dieser Text soll nur im Hover-Zustand zu sehen sein.</div>
</body>
</html>


Vielen Dank für jeden Tipp!


Zuletzt bearbeitet von kramsen am Di 12.04.2011 14:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 39
Geschlecht: Männlich
Verfasst Di 12.04.2011 15:28
Titel

Antworten mit Zitat Zum Seitenanfang

visibility:hidden/visible *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
kramsen
Threadersteller

Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht: Männlich
Verfasst Di 12.04.2011 15:32
Titel

Antworten mit Zitat Zum Seitenanfang

DerM hat geschrieben:
visibility:hidden/visible *zwinker*


Habe ich schon probiert, allerdings wird dann das gesamte #menu nichtmehr angezeigt.
  View user's profile Private Nachricht senden
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 45
Geschlecht: Männlich
Verfasst Di 12.04.2011 15:54
Titel

Antworten mit Zitat Zum Seitenanfang

kramsen hat geschrieben:
DerM hat geschrieben:
visibility:hidden/visible *zwinker*


Habe ich schon probiert, allerdings wird dann das gesamte #menu nichtmehr angezeigt.


was ja auch richtig ist. du legst für #menu bei hover eben die sichtbarkeit fest. wenn du nicht willst, das das komplette div unsichtbar wird, musst du das verschachteln.

Code:

<style>
div#menu p:hover { display: none; }
</style>
<div id="menu">
<p>der scheiss verschwindet bei hover</p>
</div>


allerdings sei gesagt, das pseudo klassen wie hover nicht überall bei allen elementen funktionieren. speziell der ie zickt da gerne rum. wie aktuell das noch ist, weiss ich grad nicht.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 37
Geschlecht: Männlich
Verfasst Di 12.04.2011 16:00
Titel

Antworten mit Zitat Zum Seitenanfang

Evtl hilft Dir das ja

http://css-tricks.com/hover-on-everything-but/
  View user's profile Private Nachricht senden
kramsen
Threadersteller

Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht: Männlich
Verfasst Di 12.04.2011 16:03
Titel

Antworten mit Zitat Zum Seitenanfang

pRiMUS hat geschrieben:
kramsen hat geschrieben:
DerM hat geschrieben:
visibility:hidden/visible *zwinker*


Habe ich schon probiert, allerdings wird dann das gesamte #menu nichtmehr angezeigt.


was ja auch richtig ist. du legst für #menu bei hover eben die sichtbarkeit fest. wenn du nicht willst, das das komplette div unsichtbar wird, musst du das verschachteln.

Code:

<style>
div#menu p:hover { display: none; }
</style>
<div id="menu">
<p>der scheiss verschwindet bei hover</p>
</div>


allerdings sei gesagt, das pseudo klassen wie hover nicht überall bei allen elementen funktionieren. speziell der ie zickt da gerne rum. wie aktuell das noch ist, weiss ich grad nicht.


Ich habe es gerade auf ähnliche Weise hinbekommen, deine Lösung ist natürlich noch besser, allerdings bleibt dort immer ein Absatz erhalten. :/

Danke für eure Antworten ihr 3!


Zuletzt bearbeitet von kramsen am Di 12.04.2011 16:10, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 37
Geschlecht: Männlich
Verfasst Di 12.04.2011 16:31
Titel

Antworten mit Zitat Zum Seitenanfang

Ist aber ne komische Lösung. Sobald ich am Regler drehe um die Schriftgröße zu verändern, sehe ich den Text auch wieder.

Hast Du meinen Link überhaupt mal angeguckt?
  View user's profile Private Nachricht senden
kramsen
Threadersteller

Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht: Männlich
Verfasst Di 12.04.2011 16:36
Titel

Antworten mit Zitat Zum Seitenanfang

Kash hat geschrieben:
Ist aber ne komische Lösung. Sobald ich am Regler drehe um die Schriftgröße zu verändern, sehe ich den Text auch wieder.

Hast Du meinen Link überhaupt mal angeguckt?


Ja, die Schrift ist anscheinend einfach nach unten geschoben. Nicht gut.

Ja den habe ich mir angesehen, ich probier gerade noch etwas herum aber irgendwie finde ich keine passende Lösung.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Hover in Css Klasse einfügen ?
[JS/CSS] CSS-Hover mit JS animieren?
CSS a:hover IE 5.01
box hover mit css
CSS Hover Effekt im IE
CSS Formatierung für Hover?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.