CSS: Több elem sötétítése hover-re

• 2013.09.30.
• sitebuild
• csscss trükkök
• Leoamros

Elég nehéz értelmes címet adni neki :) tehát amiről szó van. Van egy több boxból álló menü, slide vagy bármilyen panelünk. A feladat, hogy alap esetben minden box legyen világos, ha rávisszük az egeret, az aktuális box világos marad, a többi besötétedik.

A megoldást nemrég még simán jQuery-ben oldottam volna meg, de kicsit filózva rájöttem, hogy CSS segítségével is megoldható a probléma.

Mit is kell végig gondolni? Mi történik? Van egy nagy div, benne több kisebb div.

Példa:

Tehát valahogy így néz ki a dolog. Ez a plain, tehát nincs hover effekt. A kérés tehát, hogy csak az maradjon ilyen színű, amelyiken van az egér, a többi sötétedjen el.

Valahogy így:

Innen már könnyű kitalálni, mit is kell csinálni. Első lépésben kell egy fekete háttér. Majd erre jönnek a divek végig, egyesével megformázva.

Aztán egy újabb sor css:

div.boxes{background: #000}
div.boxes:hover > div.box{opacity: 0.5}
div.boxes:hover > div.box:hover{opacity: 1}

Aztán gondolkodtam. Miért 2 sor, mikor a kezemben van a jQueryből már jól ismert és sűrűn használt .not(); vagyis a css :not selector.

div.boxes{background: #000}
div.boxes:hover > div.box:not(:hover){opacity: 0.5}

Tehát az eredmény ugyanaz. Csak rövídebb a kód. Mivel mindkét megoldásnak hibája van a rémálmunkkal, igen Internet Explorerrel, így tojva rá, tök mindegy melyiket használjuk. Kivéve, ha nem tojunk a drága IE barátunkra. Akkor értelmesebb jQueryben megcsinálni dettó ugyanezt, mert, ha minden igaz a jQuery böngészőfüggetlen módon oldja meg nekünk ezt a problémát.

Tehát jQueryvel:

$('div.boxes div.box').hover(
    function(){
        $('div.box').not($(this)).css({opacity:0.5})
    },
    function(){
        $('div.box').css({opacity:1})
    }
);

Hirtelen ez jutott eszembe, tuti van rövidebb megoldás is, de jelenleg valami ilyennel oldanám meg.

A lényeg, hogy ha csak CSSből szeretnéd megcsinálni akkor egyszerűen csak a :not selectort használd a fenti módon.