javascript - Klonovat CSS třídu
Chci zkopírovat všechny třídy :hover do tříd .hoverid, kde id je index prvku (nebo jakýkoli jiný způsob, jak vytvořit unikátní názvy tříd pro hover).
Takže můj nápad byl nějak iterovat přes všechny prvky na stránce, které mají definovaný :hover, a naklonovat tuto třídu do .hoverid. Tímto způsobem bych mohl vyvolat efekt hover na libovolném prvku, který chci, takto:
$('#element').addClass('hover'+$(this).id);
Takže moje otázka(y) vlastně je/jsou:
- Jak procházet prvky, které mají definovaný ":hover"?
- Jak naklonovat tu třídu do jiné třídy?
Fiddle pro vyzkoušení vašich řešení: http://jsfiddle.net/kLt2P/
Odpověď č. 1
Ve skutečnosti byste mohl použít knihovnu jako JSCSSP a nějakým způsobem analyzovat všechny CSS soubory ( $ ('link['rel="stylesheet"']).attr('href') ) a na základě toho vytvořit třídy. Další možností by bylo analyzovat je sami pomocí nějakého základního regulárního výrazu. Momentálně žádné nápady nemám - ale něco zkusím.
Můžete také použít webworkery pro výkon.
http://www.glazman.org/JSCSSP/
Odpověď č. 2
JS a CSS jsou zcela nezávislé na sobě. Jinými slovy, nemůžete přistupovat k vlastnostem CSS třídy pomocí JS, i když můžete přistupovat k CSS vlastnostem elementu, protože JS působí na elementy.
Řešení
Můžete použít některá „hackerská“ řešení, jak to vyřešit, ale nejlepším řešením by pravděpodobně bylo vytvořit metodu „reverse extend“ v jQuery. Jinými slovy, museli byste napsat metodu, která dělá opak .extend() tím, že vezme dvě pole a vrátí všechny vlastnosti v druhém, které se liší od prvního nebo v něm neexistují. To vlastně není tak těžké, jak to zní.
Dalším krokem by bylo vzít každý prvek na stránce a použít na ně svou metodu „obrácené rozšíření“. Jako první parametr byste museli předat pole vrácené voláním metody .css() na prvku, když nad ním není kurzor, a jako druhý parametr pole vrácené voláním metody .css() na prvku, když je nad ním kurzor.
Pokud výsledné pole není prázdné, pak prvek skutečně má definovanou třídu :hover (nebo třídu :hover aplikovanou pomocí JS). Tady je to zajímavé: výsledné pole bude obsahovat všechny vlastnosti třídy :hover!
Poznámka k zachycení přejetí myší:
Přejetí myší můžete zachytit pomocí svázání mousein, mouseenter a hover. Doporučuji používat mousein a mouseenter a používat proměnnou příznak k indikaci, zda bylo druhé provedeno. Protože mohou v některých prohlížečích běžet současně, může to vyžadovat trochu dodatečné práce se svázáním a odsvázáním handlerů, pomocí metod .on a .off, aby se zabránilo duplicitním kopiím třídy. Tato implementace by vám měla zajistit podporu ve všech hlavních prohlížečích (IE6-10, Safari, Opera, Chrome a Firefox).
Aktualizace: Mýlil jsem se ohledně možnosti vyvolání pseudo-stavu hover (omlouvám se) - přes JS je to nemožné. Můžete však použít toto řešení pro zachycení hoveru a poté zkopírovat vlastnosti třídy při jejím prvním hoveru. Poté můžete přidat hoverovaný prvek do pole jQuery, které použijete k zajištění, že se na stejný prvek nebudete dívat více než jednou (pomocí .not). Nevýhodou tohoto je, že nebudete schopni zabránit kopírování pseudo-třídy :hover více než jednou, pokud je stejná třída :hover přiřazena více než jednomu prvku.
Dej mi vědět, jestli k tomu máš nějaké otázky. Hodně štěstí! :)