Autor |
Nachricht |
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht:
|
Verfasst Di 12.04.2011 13:55
Titel CSS Inhalt - Hover |
|
|
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 13:56, insgesamt 1-mal bearbeitet
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Di 12.04.2011 14:28
Titel
|
|
|
visibility:hidden/visible
|
|
|
|
|
Anzeige
|
|
|
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht:
|
Verfasst Di 12.04.2011 14:32
Titel
|
|
|
DerM hat geschrieben: | visibility:hidden/visible |
Habe ich schon probiert, allerdings wird dann das gesamte #menu nichtmehr angezeigt.
|
|
|
|
|
pRiMUS
Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht:
|
Verfasst Di 12.04.2011 14:54
Titel
|
|
|
kramsen hat geschrieben: | DerM hat geschrieben: | visibility:hidden/visible |
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.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
|
|
|
|
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht:
|
Verfasst Di 12.04.2011 15:03
Titel
|
|
|
pRiMUS hat geschrieben: | kramsen hat geschrieben: | DerM hat geschrieben: | visibility:hidden/visible |
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 15:10, insgesamt 2-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 12.04.2011 15:31
Titel
|
|
|
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?
|
|
|
|
|
kramsen
Threadersteller
Dabei seit: 06.12.2008
Ort: im Anschnitt
Alter: -
Geschlecht:
|
Verfasst Di 12.04.2011 15:36
Titel
|
|
|
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.
|
|
|
|
|
|
|
|
Ähnliche Themen |
hover-Button/hover-Bild wird darunter eingefügt
Hover und ie
CSS a:hover IE 5.01
:hover und ie6
box hover mit css
Hover
|
|