Text bei hover über after element einblenden?

[Klaus]

Hallo,

ich habe ein Div mit einem after Element. Bei einem hover soll jetzt noch eine Art popup mit einer Info z.B. "Dieser Wert wird im weiteren Verlauf genutzt" eingeblendet werden. Der Text müsste also absolut angezeigt werden.

Wie es bisher aussieht: JSFiddle

<input type="text" name="feld1" id="feld2">
<div class="sign_achtung"><input type="text" name="feld2" id="feld2"></div>
<input type="text" name="feld3" id="feld3">

.sign_achtung:after {
	content: "!";
	background-color:#ff0000;
	padding: 5px;
	font-size: 10pt;
	font-weight: bold;
	color:#ffffff;
	position:relative;
	top: -1px;
	left: 8px;
	width: 10px;
	border-radius: 15px;
}

Kann ich eventuell 2 after-Elemente definieren und den 2. mit position:absolute und erst beim hover sichtbar machen?

Klaus

[ChrisB]

Hi,

Kann ich eventuell 2 after-Elemente definieren

Nein. Aber ::before gibt’s ja auch noch …

MfG ChrisB

[Klaus]

Nein. Aber ::before gibt’s ja auch noch …

Das Problem bei dem before und dem after ist für mich, dass die bei der Verwendung den bestehenden Content verschieben. Also ein before verschiebt das Input-Feld dann nach rechts. (Ein 2. after würde allerdings auch nicht helfen, da es die nachkommenden Felder ja auch verschieben würde)

Kannst Du mir vielleicht ein Beispiel geben, wie ich das before-Element als eine Art popup einblenden kann, ohne dass der übrige Content verschoben wird? Wenn ich es mit position:absolute versuche, verliere ich ja die Position des div-Elements.

Wenn ich bei einem hover nur über dem after-Element ein onMouseOver ausführen könnte, würde ich den Rest mit Javascript machen. Ginge das denn?

Klaus

[Matthias Apsel]

Om nah hoo pez nyeetz, Klaus!

Kannst Du mir vielleicht ein Beispiel geben, wie ich das before-Element als eine Art popup einblenden kann, ohne dass der übrige Content verschoben wird? Wenn ich es mit position:absolute versuche, verliere ich ja die Position des div-Elements.

Das verstehe ich nicht. Dafür ist position: absolute; schon das Mittel der Wahl. Allerdings muss dann natürlich das Elternelement einen von static abweichende position-Wert haben. Siehe http://selfhtml.apsel-mv.de/position/position.html

Matthias

[Klaus]

Allerdings muss dann natürlich das Elternelement einen von static abweichende position-Wert haben. Siehe http://selfhtml.apsel-mv.de/position/position.html

Vielen Dank für die Info und den Link. Er hat mir wirklich sehr weitergeholfen.

Kannst Du mir vielleicht noch verraten, wie ich mit dem hover vom after element das before element beeinflussen kann? Siehe JSFiddle

Das klappt leider nicht:

.sign_achtung:hover::after .sign_achtung::before {
    background-color:0000ff;
}

Klaus

[ChrisB]

Hi,

Das klappt leider nicht:

> .sign_achtung:hover::after .sign_achtung::before {
>     background-color:0000ff;
> }
> 

Das kann nicht klappen, weil das ::before-Element keine Nachfahre des ::after-Elements ist.

Und mit .sign_achtung:hover::after selektierst du kein ::after-Pseudoelement :hover-Zustand – sondern das ::after-Element, wenn sich das „Elternelement“ im Zustand :hover befindet.

M.W. kannst du nicht auf den :hover-Zustand eines Pseudoelementes allein reagieren.

MfG ChrisB

[ChrisB]

Hi,

Das Problem bei dem before und dem after ist für mich, dass die bei der Verwendung den bestehenden Content verschieben. Also ein before verschiebt das Input-Feld dann nach rechts.

Wieso, du wolltest es doch absolut positionieren?

Wenn ich es mit position:absolute versuche, verliere ich ja die Position des div-Elements.

Nö, dem div relative geben, wie Mathias schon sagte.

Wenn ich bei einem hover nur über dem after-Element ein onMouseOver ausführen könnte, würde ich den Rest mit Javascript machen. Ginge das denn?

Nein, du kannst keine Eventhandler direkt an Pseudo-Elemente binden.

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, Klaus!

> .sign_achtung:after {
> 

.sign_achtung::after

Kann ich eventuell 2 after-Elemente definieren und den 2. mit position:absolute und erst beim hover sichtbar machen?

Nein. Aber du könntest das before-Pseudoelement verwenden.

Matthias

[ChrisB]

Hi,

ich habe ein Div mit einem after Element. Bei einem hover soll jetzt noch eine Art popup mit einer Info z.B. "Dieser Wert wird im weiteren Verlauf genutzt" eingeblendet werden.

Diese Information dürfte vermutlich wichtig für die Nutzung des Formulars sein, egal ob/wie es mit CSS formatiert wird. Also sollte sie auch im HTML untergebracht werden, und nicht erst mit CSS „hinzugefügt“.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

Diese Information dürfte vermutlich wichtig für die Nutzung des Formulars sein, egal ob/wie es mit CSS formatiert wird. Also sollte sie auch im HTML untergebracht werden, und nicht erst mit CSS „hinzugefügt“.

Zumal es auf den allermeisten Geräten, mit denen Nutzer im Web unterwegs sind, gar kein Hover gibt.

LLAP

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Zumal es auf den allermeisten Geräten, mit denen Nutzer im Web unterwegs sind, gar kein Hover gibt.

Diese Aussage ist so in ihrer Absolutheit nicht mehr (lange) gültig.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

Zumal es auf den allermeisten Geräten, mit denen Nutzer im Web unterwegs sind, gar kein Hover gibt.

Diese Aussage ist so in ihrer Absolutheit nicht mehr (lange) gültig.

Sondern? Welche Geräte/Browser imitieren Hover bei Tap?

LLAP

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Zumal es auf den allermeisten Geräten, mit denen Nutzer im Web unterwegs sind, gar kein Hover gibt.

Diese Aussage ist so in ihrer Absolutheit nicht mehr (lange) gültig.

Sondern? Welche Geräte/Browser imitieren Hover bei Tap?

Auf meinem Samsung Galaxy Tab unter Android 4.4.2 Chrome, Dolphin, Firefox, Opera und der Androidbrowser. Für weitere Aussagen müsste mal mal eine Umfrage starten.

Matthias

[Mitleser]

Sondern? Welche Geräte/Browser imitieren Hover bei Tap?

Auf meinem Samsung Galaxy Tab unter Android 4.4.2 Chrome, Dolphin, Firefox, Opera und der Androidbrowser. Für weitere Aussagen müsste mal mal eine Umfrage starten.

Selbst mein iPad 1 tut das.