Mam nasledujici problem. U tagu <div> mam nastaveno OnMouseOut, ktery chovava jednu jeho soucast. Script se ovsem spusti uz pri odchodu mysi z 1. soucasti tohoto div tagu (tj. napisu Nabidka)
HTML kod:
<div id="menu" onMouseOut="javascript:hide('polozky')">
<h2 onClick="javascript:show('polozky')" class="menu_starter">Nabídka</h2>
<ul id="polozky"><li><a href="http://rada.borec.cz">Radkovo HQ</a></li></ul>
</div>
Javascripty:
// Show layer
function show(identifikator) {
var whatshow = document.getElementById(identifikator);
whatshow.style.visibility = "visible";
}
//hide layer
function hide(identifikator) {
var whathide = document.getElementById(identifikator);
whathide.style.visibility = "hidden";
}
Napis Nabidka a odkaz jsou v CSS nastaveny tak, aby se prekryvaly (pozdeji nastavim tesne sousedstvi, ale kvili testovani jsem je dal pres sebe) a maji stejny Z-index.
Dokazete mi nekdo poradit?
proc mas predtim javascript: ?
Jasne, nemuselo by to tam byt, kdyz uz je to definovany jako funkce...ale s tim by to melo fungovat stejne...
Zkus misto visibility pouzit vlastnost display
Pokud chces takto dynamicky menit CSS styly, musis si nadefinovat vychozi stav prislusne vlastnosti v HTML napr. takto
<STYLE>
<!--
#polozky {visibility: hidden;}
-->
</STYLE>
nebo primo u elementu
...
<ul id="polozky" style="visibility:hidden">
...
2 Rafej: To je reseno pres #polozky v externim CSS, ktery jsem neprikladal.
2 Sojkovec: Pres "display:none" to jde samozrejme taky, jen by bylo potreba vychytat vcleneni do dokumentu.
Jenze me nejde o to, jak menit viditelnost, ale jak donutit JS, aby se nespoustel prave a jen pri odchodu z
<h2 onClick="javascript:show('polozky')" class="menu_starter">Nabídka</h2>,
ale az nebude mys ukazovat ani na Nabídku ani na
<ul id="polozky"><li><a href="http://rada.borec.cz">Radkovo HQ</a></li></ul>.
To je ten problem. Jinak ale dekuji...
Prvek div ma 2 prvky vnorene: Nabidka a polozky. Klipnutim na nabidku se zobrazi prvek polozky a ten by mel zmizet az nebude mys nad prvkem div (tedy ani nad nabidkou ani nad polozkou).
Takhle to ma alespon fungovat, ale chova se to, jako by ten onMouseOut byl na prvku Nabidka a proto neceka se zmizenim prvku polozky az mys nebude ani nad prvkem nabidka ani nad prvkem polozky.
Tak tu fci dej jen na <div> a ne na <h2> a do divu dej ještě tabulku a tam do ní dej tu fci.
<div id="menu" onMouseOut="hide('polozky')">
<table cellpadding=2 border=0 onMouseOut="hide('polozky')">
<tr>
<td>
<h2 class="menu_starter">Nabídka</h2>
<ul id="polozky"><li><a href="http://rada.borec.cz">Radkovo HQ</a></li></ul>
</td></tr></table>
</div>
A ještě abych nezapoměl, správně jak říkal Rafej, tak do toho divu ještě dej:
<div id="menu" style="visibility:hidden" onMouseOut="hide('polozky')">
Nakonec jsem se to rozhodl upravit trochu slozitejsim skriptem, az ho budu mit, tak ho sem napisu. Diky za pomoc
Ideální je javascriptem změnit class (třídu) nadřazeného prvku. Když má defaultně nastavené display: none, tak takhle se mu dá přiřadit display: block. Ani se nemusí myslím měnit třída, stačí jedna přidat, protože css změněné skriptováním má tuším vyšší prioritu podobně jako styly zadane přes style=...
Tímhle způsobem se člověk zbaví problémů s přechody mezi vnořenými prvky.
Ideální je ale použití :hover u nadřazeného elementu (ne pro IE)