Před nedávnem jsem psal návod na vytvoření průhledného pozadí pomocí CSS. Později mě napadlo přidat i způsob, jak měnit průhlednost při najetí myší, už jenom protože to není nic složitého. Můj popsaný postup má v tomhle případě jeden problém – jako prvek, který získá mouseover je zde odkaz a <div> s pozadím, který má na starost průhlednost, je ve struktuře dokumentu vedle něj. A jelikož IE6 neumí CSS selektor :hover pro nic jiného než odkazy, tak není možné využít ani :hover pro nadřazený prvek (ke kterému událost „probublá“ z odkazu).

První řešení, který mě klasicky napadlo je JavaScript, pak už jsem dál nepřemýšlel a rovnou ho použil. Tedy samozřejmě ne přímo JavaScript, ale některou z knihoven, které byly vytvořeny, aby trochu pomohly ubohým programátorům vypořádat se s rozdíly mezi prohlížeči a hlavně nepsat tolik kódu. Jelikož poslední dobou dělám pouze v Ruby on Rails, které používají knihovnu Prototype, tak jsem sáhl po ní, ale třeba jQuery nebo cokoliv jiného by se dalo taky bez problémů použít.

Po ujasnění si všeho je výsledný postup jednoduchý – při události mouseover přidat nadřazenému prvku třídu hover a definovat nový CSS selektor .hover div který nastaví průhlednost na 0 (úplně viditelný). Pomocí Prototype toho dosáhnete například takto:

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
    $$('.opaque-background').each(function(el){
        Event.observe(el, 'mouseover', function(){
            el.addClassName('hover');
        });
        Event.observe(el, 'mouseout', function(){
            el.removeClassName('hover');
        });
    });
});
</script>

Výsledný kód i s doplněnými styly si můžete prohlédnout zde (otevře se v novém okně), nebo stáhnout včetně Prototype.

Zanechej komentář

K zanechání komentáře ke článku musíte být přihlášen. Přihlásit »