Autor Zpráva
Suta
Profil
Mám-li následující kód (zjednodušený výcuc):

<style>
a:hover { background: url("pozadi_a_hover.png"); }
</style>

<a href="#">Odkaz někam</a>

<script>
x = document.getElementsByTagName("a")[0];
x.style.backgroundImage = "none";
</script>


Scriptem tedy odstraním pozadí odkazu. Tím se (pro mě bohužel), zruší í pozadí aktivované při najetí na odkaz, tedy a:hover.

Jak můžu javascriptem nově nastavit pozadí pro pseudoprvek a:hover?
Klasické pozadí pro odkaz nastavím např. takto:

document.getElementsByTagName("a")[0].style.backgroundImage = "url('img/menu_a_activ_middle.png')";


Celý večer však hledám a lámu si hlavu, jak nastavit pozadí pro pseudoatribut (tedy např. zmíněný a:hover).
Chamurappi
Profil
Reaguji na Sutu:
Scriptem tedy odstraním pozadí odkazu.
Lépe řečeno: přidáš odkazu atribut style="background-image: none", který přebije styl nastavený ve stylopisu. Objekt „style“ na elementu vůbec nepracuje se stylopisem, definice pro a:hover pořád platí, akorát v porovnání s atributem moc je slabá.

Jak můžu javascriptem nově nastavit pozadí pro pseudoprvek a:hover?
Těžko, ale můžeš zrušit to pozadí, které jsi nastavil do atributu:
x.style.backgroundImage = "";

Při JS hrátkách se vzhledem je lepší měnit jen třídy (tedy element.className) a na element.style vůbec nesahat.
Suta
Profil
Chamurappi
Díky!, pomohlo.

Snažím se experimentovat s menu, stále se potácím mezi tím, co ještě jde udělat pomocí css a na co je již potřeba sáhnout k javascriptu. Odpověď není jednoduchá a jednoznačná, záleží projekt od projektu.

Na uvedeném příkladu níže (kde je již dořešen uvedený problém výše na základě Chamurappiho rady) využívám javascript, nedokázal jsem to sestrojit pomocí čistého css. Myslím, že v takovéto podobě (+ další sub-sub menu) to již nejde. Navíc, jelikož položky menu budou generovány a tudíž budou mít různou délku, jsou tlačítka se zakulacenými rohy udělaná pro univerzální / měnící se velikost.

Nechci zakládat nové téma, takže budou-li připomínky k již téměř hotovému menu, budu jedině rád!
Odkaz zde: http://petrzavicak.cz/editor

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: