.class:hover und durch JS erstelltes element

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • .class:hover und durch JS erstelltes element

    Hi,

    meine mit JS durch document.createElement() erstellten Elemente nehmen die CSS Anweisungen .class:hover nicht an.

    Beispiel:

    CSS:

    Quellcode

    1. #div .klasse {background:green;}
    2. #div .klasse:hover {background:yellow;}


    JS:

    Quellcode

    1. var element = document.getElementById('div');
    3. var e = document.createElement('span');
    4. e.className = 'klasse';
    5. e.appendChild(document.createTextNode('text'));
    7. element.appendChild(e);



    Funktioniert natürlich wie es soll. Im FF jedoch wird funktionieren die hover-Anweisungen jedoch nicht. Im Safari wie sie sollten.


    Warum?

    EHW

  • Doctype vergessen?
    Wenn du keinen Doctype verwendest, springt Firefox/Mozilla in den s.g. Quirks Mode. Und im Quirks Mode wird die :hover Pseudoklasse nicht auf alles angewendet.

    Die ganzen Sonderregeln muss eigentlich kein Mensch wissen. Validiere deinen Code bei validator.w3.org und danach sollte alles funktionieren.
    Hier noch mehr Informationen zum Quirks Mode: developer.mozilla.org/en/mozilla_quirks_mode_behavior

    The :hover pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes.
    The :hover and :active pseudoclasses only match links and form controls when the part of the selector they are part of does not have a tag name, id, or class.( Obsolete since Gecko 6.0 Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work.)