Klaus: Text bei hover über after element einblenden?

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

  1. Hi,

    Kann ich eventuell 2 after-Elemente definieren

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

    MfG ChrisB

    --
    Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …
    1. 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

      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen satt und Sattel. http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. 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

          1. 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

            --
            Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …
      2. 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

        --
        Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …
  2. 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

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Skat und Skatepark. http://www.billiger-im-urlaub.de/kreis_sw.gif
  3. 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

    --
    Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …
    1. @@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

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. 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

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Star und Start. http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. @@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

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. 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

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dom und Dominostein. http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. 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.