Autor Zpráva
David1256
Profil
Dobrý den,

mám takový problém s odkazy v menu. Mám víceúrovňové menu viz http://mafiani.wu.cz/test.htm a potřeboval bych udělat, aby se mi při přejíždění nad pododkazy změnila barva nadodkazu na žlutou. Snažil jsem se to udělat pomocí JS tím způsobem, že při přejíždění nad pododkazy se změní class u nadodkazů, jenže mi to nějak nefunguje.
Důležité z kódu zde:
.pozadi{
background-color: black;
}
.pozadi:hover{
background-color: yellow;
} 
<li onMouseOver=window.document.pozadi.class='pozadi:hover';"><a href="#" class="pozadi" name="pozadi">Odkaz 1</a>
Máte někdo nějaký nápad?
Díky.
suvel
Profil
Přes hover to nefunguje. Zkus měnit color nebo backgroundColor.
David1256
Profil
pozadi:hover je jen název stylu, který jsem si tak pojmenoval, abych věděl, co ovlivňuje. S hoverem jako takovým nikde nepracuji. Styl bych si mohl pojmenovat klidně "styl" místo "pozadi:hover" a výsledek by byl stejný. Tam zřejmě chyba nebude.
suvel
Profil
Omlouvám se, jen jsem to v rychlosti přelítnul. Každopádně tam ale chybí uvozovky
<li onMouseOver="window.document.pozadi.class='pozadi:hover';">
panther
Profil
David1256:
- chybí 1 uvozovka
- proč si myslíš, že by měla fungovat třída, která obsahuje uvnitř sebe dvojtečku?
- window.document.pozadi není definováno
suvel
Profil
Takže se omlouvám ještě jednou - konečně jsem se na to podíval pořádně:
<style>
.pozadi{
background-color: black;
}
.pozadizlute{
background-color: yellow;
}
</style> 
<ul>
<li><a class="pozadi" name="pozadi" href="#" onmouseover="this.className='pozadizlute'" onmouseout="this.className='pozadi'">Odkaz 1</a></li>
</ul>
David1256
Profil
Super. Díky. Ovšem potřeboval bych to ještě trochu poupravit. Potřebuji totiž, aby se po přejetí myši nad <li> změnila class <a>. Rád bych tedy nějak identifikoval <a >. Protože na něj odkazuji z <li> tak "this" není možné. Nabízelo by se
window.document.pozadi.className
ale to nefunguje
Myslel jsem si, že za slovíčkem this se skrývá právě to window.document.pozadi ale není to tak. Co se tedy skrývá přesně za tím this?
panther
Profil
David1256:
aniž bys musel měnit třídy v HTML, lze udělat i něco takového
<style>

a {padding: 0 20px 0 5px;}
menu {width: 100px; background: #ddd;}
menu > li:hover > a {background: red;}
menu > li > a:hover {background: yellow;}
menu li li:hover a {background: green;}
menu li li a:hover {background: blue;}

</style>

<menu>
    <li><a href="">1</a>
        <ul>
            <li><a href="">1.1</a>
            <li><a href="">1.2</a>
        </ul>
    <li><a href="">2</a>
        <ul>
            <li><a href="">2.1</a>
            <li><a href="">2.2</a>
            <li><a href="">2.3</a>
        </ul>
    <li><a href="">3</a>
        <ul>
            <li><a href="">3.1</a>
        </ul>
</menu>
Pravda, starší IE neumí :hoverovat na elementech jiných než je odkaz, ale buď to nevadí (LI budou bez hoveru), nebo pro ně lze toto chování doscriptovat.
David1256
Profil
panther:
Díky. Se znakem ">" jsem se ještě nikdy nesetkal. Škoda jen že to nefunguje v IE6. Proto se opět vracím k [#7] David1256 Mohl bych dostat i na toto odpověď. Asi by to definitivně vyřešilo můj problém.
suvel
Profil
Tak ta odpověď je tady:
<style>
.pozadi{
background-color: black;
}
.pozadizlute{
background-color: yellow;
}
</style>
<script type="text/javascript">
function zluta(polozka){
    document.getElementsByName(polozka)[0].className='pozadizlute';
}
function modra(polozka){
    document.getElementsByName(polozka)[0].className='pozadi';
}
</script>
<ul>
<li onmouseover="zluta('pozadi')" onmouseout="modra('pozadi')"><a class="pozadi" name="pozadi" href="#">Odkaz 1</a></li>
</ul>

Jsou použity funkce (samozřejmě to není podmínkou), při více položkách se budou hodit :-)
Namísto name by bylo asi lepší používat u jednotlivých položek id a trochu to pak ještě vypilovat.
Jinak doporučuji studium javascriptu a používání chybové konzole :-))


Ještě jsem si trochu hrál a tohle je "učesanější":
<style>
.pozadi{
background-color: black;
}
.pozadizlute{
background-color: yellow;
}
</style>
<script type="text/javascript">
function barva(barva,polozka){
    document.getElementsByName("pozadi")[polozka].className=barva;
}
</script>
<ul>
<li onmouseover="barva('pozadizlute',0)" onmouseout="barva('pozadi',0)"><a class="pozadi" name="pozadi" href="#">Odkaz 1</a></li>
<li onmouseover="barva('pozadizlute',1)" onmouseout="barva('pozadi',1)"><a class="pozadi" name="pozadi" href="#">Odkaz 1</a></li>
</ul>
Ale stajně by se mi to víc líbilo s id, zvláště je-li stránka psaná v php...
David1256
Profil
Díky moc za rady. Vše už mi funguje, jak má.

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: