Situazione:Come recuperare il valore dello stile di trasformazione pseudo-elemento con Javascript?
div.xy:hover {
transform: all rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
Domanda:
Ho bisogno di recuperare il con essa posso visualizzare e cambiare. Hai bisogno di aiuto con il percorso che mi porta al 360.
Qualche idea?
Credo che document.getElementById('XYZ').style.WebkitTransform restituirà "rotate(360deg)" nei browser WebKit. È possibile utilizzare style.MozTransform per Firefox 3.1+, style.msTransform per IE9 +, style.OTransform per Opera.
Fonte: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
Per associare elemento con eventi del mouse:
var e = document.getElementById('test') // Your div ID
e.onmouseover = function(){
var degree = 360; // Rotation on :hover
e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
e.style.MozTransform = 'rotate(' + degree + 'deg)';
e.style.OTransform = 'rotate(' + degree + 'deg)';
e.style.msTransform = 'rotate(' + degree + 'deg)';
e.style.transform = 'rotate(' + degree + 'deg)';
}
e.onmouseout = function(){
var degree = 0; // Initial rotation
e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
e.style.MozTransform = 'rotate(' + degree + 'deg)';
e.style.OTransform = 'rotate(' + degree + 'deg)';
e.style.msTransform = 'rotate(' + degree + 'deg)';
e.style.transform = 'rotate(' + degree + 'deg)';
}
Potrebbe essere più semplice con jQuery, ma hai avuto modo di conoscere le tue radici JavaScript!
Funziona, grazie, ma solo con il div, non con div: hover. Qualche possibilità di cambiare il div: stile hover? – Heiko
Non conosco un modo per modificare l'elemento ': hover' con' JavaScript', ma è possibile associare gli eventi '.onmouseover' e' .onmouseout' sull'elemento. Vedi la mia risposta aggiornata. –
+1 per una bella risposta - Non sai come impostare 'transform-origin' per tutti i browser con Javascript, per favore ...? –
Avrai bisogno jQuery ma potrebbe essere quello che stai cercando ....
$(document).ready(function(){
$(".xy:hover").css("transform")
});
Questa restituire il valore come una stringa. Probabilmente dovresti controllare se restituisce 360deg o il tutto. Lascia cadere div per jQuery e CSS. Per jQuery è più veloce non chiamarlo e in CSS non aggiunge specificità.
Accettare, per favore? –