| Autor | Zpráva | ||
|---|---|---|---|
| David1256 Profil |
#1 · Zasláno: 28. 3. 2012, 17:42:01
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>Díky. |
||
| suvel Profil |
#2 · Zasláno: 28. 3. 2012, 18:02:50
Přes hover to nefunguje. Zkus měnit color nebo backgroundColor.
|
||
| David1256 Profil |
#3 · Zasláno: 28. 3. 2012, 18:08:22
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 |
#4 · Zasláno: 28. 3. 2012, 18:17:37
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 |
#5 · Zasláno: 28. 3. 2012, 18:22:52
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 |
#6 · Zasláno: 28. 3. 2012, 19:01:53
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 |
#7 · Zasláno: 28. 3. 2012, 19:41:08
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 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 |
#8 · Zasláno: 28. 3. 2012, 19:51:40
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>: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 |
#9 · Zasláno: 28. 3. 2012, 20:09:50
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> |
||
| David1256 Profil |
#11 · Zasláno: 30. 3. 2012, 21:36:44
Díky moc za rady. Vše už mi funguje, jak má.
|
||
|
Časová prodleva: 11 let
|
|||
0