Wie füge ich dynamisch einem Element eine neue Klasse hinzu?

Question

Gibt es eine Möglichkeit, einem Element unter :hover eine neue CSS-Klasse hinzuzufügen?

Wie für jQuery, aber in CSS übersetzt:

$(element).addClass('someclass'); 

Answer 1

Kurze Antwort nein :)

Aber man konnte nur die gleiche CSS für den Hover verwenden wie so:

a:hover, .hoverclass { 
    background:red; 
} 

Vielleicht, wenn Sie erklären, warum Sie die Klasse hinzugefügt haben, kann es eine bessere Lösung geben?

Answer 2

Mit nur CSS, nein. Sie müssen jQuery verwenden, um es hinzuzufügen.

Answer 3

CSS hat wirklich nicht die Fähigkeit, ein Objekt auf die gleiche Weise wie JavaScript zu ändern, also kurz - nein.

Answer 4

:hover ist eine Pseudoklasse, so dass Sie dort Ihre CSS-Deklarationen setzen:

a:hover { 
    color: #f00; 
} 

Sie auch eine Liste der Selektoren können CSS-Deklarationen zu einem hovered Element oder ein Element mit einer bestimmten Klasse gelten:

.some-class, 
a:hover { 
    color: #f00; 
} 

Answer 5

warum @Marco Berrocl bekommen eine negative Rückmeldung und seine Antwort ist völlig richtig was ist mit einer Bibliothek, um einige Animationen zu machen, so muss ich die Klasse in Hover Element nicht den Code aus der Bibliothek zu kopieren und dies wird machen ich langsam.

so denke ich, schweben die Antwort nicht und er sollte Jquery oder Javascript in vielen Fällen

Answer 6

verwenden Da jeder Sie jQuery/JS Antworten auf diese gegeben hat, stelle ich eine zusätzliche Lösung. Die Antwort auf Ihre Frage ist immer noch nein, aber mit LESS (ein CSS-Pre-Prozessor) können Sie dies leicht tun.

.first-class { 
    background-color: yellow; 
} 
.second-class:hover { 
    .first-class; 
} 

Ganz einfach, Sie jederzeit über .second-class schweben wird es alle Eigenschaften .first-class geben. Beachten Sie, dass die Klasse nicht permanent hinzugefügt wird, sondern nur bei Hover. Sie können mehr über LESS erfahren hier: Getting Started with LESS

hier ein SASS Weg, es zu tun, wie gut:

.first-class { 
    background-color: yellow; 
} 
.second-class { 
    &:hover { 
    @extend .first-class; 
    } 
} 

Answer 7

Dies ist, wie Sie es tun:

var e = document.getElementById('myIdName'); 
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex"); 
alert('z-index: ' + value);