• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

img / hover /text

majesticc89

majesticc89

Mitglied
Hallo Leute,
ich würde gerne wissen, wie ich einen Text über einem Bild erscheinen lasse (beim :hover).
Im HTML ist es ein a-tag, im CSS wird das img als background und der display:block Funktion eingebunden werden.
Der Text, soll nur beim :hover über dem Bild erscheinen.
Hat jmd eine Idee?

z.B.:
HTML:
<a href="#"><p>BLABLA</p></a>

CSS:
a {
background: url(".......");
background-size: ...;
display: block;
}

a p {display: none}

a:hover p {display: block;]

funktioniert nur nicht -.-

LG
 
Werbung:
ein p-Tag in einem a-Tag?
Kann ja nicht gut gehen!

Sowas gehört nicht in einen a-Tag.
Richtig wäre:

<p><a>Bla</a></p>

CSS: 
p {
    width: 100px;
    height: 100px;
    background: red;
}

a {
    display: none;
    width: 100%;
    height: 100%;
}

p:hover > a {
    display: block;
}
 
Werbung:
Sry für die späte Antwort, war gerade alles sehr hektisch.
Also ich habe den a-tag jetzt in den p-tag gesetzt wie von @scbawik vorgeschlagen.
Tut soweit alles gut.
Eine Frage am Rande. Im CSS Teil machst du:
" p:hover > a "
ich benutze immer einfach nur:
" p:hover a "
und es funktioniert soweit auch. Ist meine Vorgehensweise "unüblich/falsch" oder geht schlichtweg beides? Was ist dann der grundlegende Unterschied?
LG
 
majesticc89 schrieb:
Sry für die späte Antwort, war gerade alles sehr hektisch.
Also ich habe den a-tag jetzt in den p-tag gesetzt wie von @scbawik vorgeschlagen.
Tut soweit alles gut.
Eine Frage am Rande. Im CSS Teil machst du:
" p:hover > a "
ich benutze immer einfach nur:
" p:hover a "
und es funktioniert soweit auch. Ist meine Vorgehensweise "unüblich/falsch" oder geht schlichtweg beides? Was ist dann der grundlegende Unterschied?
LG
Zum Vergrößern anklicken....

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Damit werden nur direkte Kinder ausgewählt.
 
Werbung:
Ok, danke lese mich einmal da durch. Jetzt habe ich aber doch noch ein Problem:

TEST

da fehlt im css Teil noch:

.testdiv a:hover p {
display: block;
}

wird gerade nicht übernommen.

Ich habe ein Bild. Das soll beim "hovern" etwas verschwimmen. Das klappt auch. Beim draufklicken, soll es auf etwas weiterleiten, daher der a-tag.
Allerdings soll beim "hovern" ein Text auftauchen (In meinem Beispiel der Text "WM2018").
Was mach ich den falsch? Stehe gerade auf dem Schlauch.
 
Werbung:
Hey, ja das würde an sich passen. Allerdings müsste ich das ohne "position: absolute" hinbekommen.
Idee?
Wie würdest du das den persönlich machen?
 
Ja stimmt, hatte gerade einen Denkfehler.
Aus Interesse, wie hättest du es den gemacht (brauchst keinen Code schreiben), einfach in 3-4 Sätzen.
Ist mein Ansatz "nicht üblich"?
 
Werbung:
Ich hatte auch einen kleinen denkfehler. Ohne Positionsangaben fält mir gerade nix ein.Man muß die Schrift ja über das Bild legen und dazu brauch man zindex. selbst wenn man es ohne übereinander legen tut ,wird nach den hovern ja alles unscharf. Habe es gerade versucht ohne positionsangaben zu machen aber mir fält da ohne Javascript nix ein. Vieleicht kann ja mal wer anders eine Version ohne position posten,weil das interesiert mich jetzt auch.

Ich glaube es geht nicht und wie du es gemacht hast kommt der optimalen Lösung schon zimlich nahe
 
Genau das war auch mein Problem. Beim Hovern wurde der Text auch unscharf. Das heißt man muss den Text zwangsweise vom a-tag absetzten (da man ja nur diesen blured).
Ich bin grundsätzlich nicht so der z-index Freund daher würde ich das gerne ohne machen.
JS ist natürlich auch möglich, wobei ich bei so etwas "kleinem" jetzt ungern noch ein Script reinschreiben würde.
 
Ich habe das heute Nacht nochmal versucht ,weil ich es unbedingt ohne position schaffen wollte.Nur habe ich keine möglichkeit gefunden.Auch nicht mit before und after und so weiter. Es gibt zwar eine möglichkeit ,aber das kann noch nicht jeder Browser,also fält die Variante auch erstmal flach.

Selbst mit JS kriegt man das auch nur hin wenn man position und zindex hinzufügt.
Also ich habe zumindest keine andere möglichkeit gefunden.Wenn wem anders eine Lösung dazu einfällt bitte schreiben ,weil würde mich auch interesieren ob es auch anders gehen würde ?
 
Werbung:
Die frage ist ja nicht ob position oder zindex schlecht ist.Die frage ist ob es auch ohne geht?.
Zindex gibt es doch auch nur wenn es position gibt oder nicht?.
Also ohne position kein zindex.
Hast du dafür auch nee Lösung? Mit position hatten wir ja schon am Anfang?
 
z-index gibt es immer, schon klar. Nur kann man diesen nur benutzen, wenn man eine position angibt die von static abweicht.
Du benutzt opacity, schaue mir mal das an, scheint auch zu klappen.
 
Werbung:
majesticc89 schrieb:
z-index gibt es immer, schon klar. Nur kann man diesen nur benutzen, wenn man eine position angibt die von static abweicht.
Du benutzt opacity, schaue mir mal das an, scheint auch zu klappen.
Zum Vergrößern anklicken....

Es gibt aber keinen Grund auf "static" zu bestehen. Zumindest nicht in diesem Fall.
Mit opacity hat das nichts zu tun. Das dient nur der Animation.
 
scbawik schrieb:
Es gibt aber keinen Grund auf "static" zu bestehen. Zumindest nicht in diesem Fall.
.
Zum Vergrößern anklicken....
Da gebe ich dir auch recht.Davon mal abgesehen ob nötig oder nicht.Wie oft kommen Leute ins Forum die mit Aufgaben kommen die kaum sinn ergeben.Warum ? Ja weil der Lehrer in der Schule solche Aufgaben gibt.Wie oft gab es schon Aufgaben die vollkommen veraltet wahren oder kaum sinn ergeben.
Heute auch wieder. Man durfte das Html nicht verändern und kein <a> vor dem Bild setzten.Trotzdem soll das ganze Bild verlinkt sein.
Ob man sowas nun brauch oder ob es nötig, ist soll mal dahin gestellt sein.Wenn man den Fragesteller sein Wunsch erfüllen kann dann versucht man es doch .In den Sinne Gute Nacht
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben