Leggi :hover pseudo classe con javascript

Ho fatto una funzione che sovrascrivere il :hover di alcuni elementi di una pagina. Sfuma tra il normale e l’ :effetto hover. Che per ho dovuto creare un .hover classe nel mio file CSS. Penso che questo sia un po ‘ immondo. Come ho potuto leggere l’ :hover pseudo classe di contenuto?

OriginaleL’autore meo | 2009-08-16

4 Replies
  1. 2

    AGGIORNAMENTO: io in qualche modo ho sbagliato. Il seguente esempio non funziona. Vedere @bfavaretto commento per una spiegazione.

    In Firefox, Opera e Chrome o qualsiasi altro browser che implementa correttamente finestra.getComputedStyle è molto semplice. Devi solo passare “hover” come secondo argomento:

    <!DOCTYPE html>
    
    <html>
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
      display: block;
      width: 200px;
      height: 200px;
      background: red;
    }
    div:hover {
      background: green;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <script type="text/javascript">
    window.onload = function () {
        var div = document.getElementsByTagName("div")[0];
        var style = window.getComputedStyle(div, "hover");
        alert(style.backgroundColor);
    };
    </script>
    </body>
    </html>

    , Ma non credo che c’è ancora una soluzione per Internet Explorer, con l’eccezione della document.styleSheets come Gumbo suggerito. Ma ci saranno differenze. Così, dopo un .hover classe è la soluzione migliore finora. Non impuro.

    thx! Forse la sua non è impuro, ma la persona che utilizza la funzione deve sapere che ha a che fare .hover classe. Sarebbe bello evitare questo.
    per curiosità, come hai intenzione di gestire IE problema?
    questo è un grande esempio di alcuni browser di incoerenza che non vale la pena il vostro tempo di fissaggio. Se qualcuno sta utilizzando un inferiore del browser, sarà ancora ottenere un sito web di lavoro, semplicemente non hanno il bel po ‘ tocchi.
    Sono completamente d’accordo, ma ci sono casi in cui il cliente disperatamente vogliono lo stesso look del browser che sta utilizzando (IE6). Ho riscontrato tali problemi. Altrimenti progressivo miglioramento è il modo per andare.
    Questo non funziona, perché getComputedStyle si aspetta una pseudo-elemento come secondo parametro, e hover è una pseudo-classe. Se si rimuove, funziona, ma danno solo l’hover valore se esso viene eseguito mentre l’elemento è in realtà hover stato. demo.

    OriginaleL’autore Ionuț G. Stan

  2. 10

    Utilizzando getComputedStyle come il accettato la risposta non può funzionare, perché:

    1. Calcolato stile per lo stato hover è disponibile solo quando l’elemento è in realtà la situazione.
    2. Il secondo parametro getComputedStyle dovrebbe essere vuota o uno pseudo-elemento. Non funziona con :hover perché è una pseudo-classe.

    Qui è una soluzione alternativa:

    function getCssPropertyForRule(rule, prop) {
        var sheets = document.styleSheets;
        var slen = sheets.length;
        for(var i=0; i<slen; i++) {
            var rules = document.styleSheets[i].cssRules;
            var rlen = rules.length;
            for(var j=0; j<rlen; j++) {
                if(rules[j].selectorText == rule) {
                    return rules[j].style[prop];
                }
            }
        }
    }
    
    //Get the "color" value defined on a "div:hover" rule,
    //and output it to the console
    console.log(getCssPropertyForRule('div:hover', 'color'));

    Demo

    Sospetto identici, ma risposta‘s metodo permette di selettori che non sono l’intera regola di selezione.
    Questo non funziona con i fogli di stile su altri domini a causa di restrizioni sul dominio. quindi è parziale soluzione

    OriginaleL’autore bfavaretto

  3. 3

    Si poteva accedere documento.i fogli di stile e cercare una regola che viene applicata su tale specifico elemento. Ma non è il detergente rispetto all’utilizzo di una semplice classe aggiuntiva.

    i fogli di stile caricato da file esterni non sono disponibili nel documento.i fogli di stile.

    OriginaleL’autore Gumbo

  4. 0

    Se ci sono persone qui che utilizzano le domande accettate risposta ma non funziona, ecco una bella funzione che possa:

    function getPseudoStyle(id, style) {
        var all = document.getElementsByTagName("*");
        for (var i=0, max=all.length; i < max; i++) {
            var targetrule = "";
            if (all[i].id === id) {
                if(all[i].selectorText.toLowerCase()== id + ":" + style) { //example. find "a:hover" rule
                    targetrule=myrules[i]
                }
            }
            return targetrule;
        }
    }
    Che non funziona, si prega di controllare la mia risposta.
    Che cosa è myrules nel codice?

    OriginaleL’autore C-TZ

Lascia un commento