L

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

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:

Minta boxok

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:

Minta boxok

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.

CSS :not selector

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.

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök