[CSS] Div kleur bepalen met hover of click

[Verwijderd]

Ik zit met een CSS probleem waar ik helaas niet uit komt. Heb me al suf gezocht maar ik kan niks vinden.

Even een visual om het duidelijk te maken:



Wat ik wil creëren is zodra je over 1 van de gekleurde blokjes komt en/of erop klikt, het grote vlak de background color de kleur van het blokje word.

Bij voorkeur ook enkel met CSS omdat het zich in een Magento omgeving gaat bevinden.

In het verleden heb ik wel een tuts gezien waarmee door een hover over een foto, de foto in ander div verscheen.

Maar echt de background color van de div moet zich aanpassen. In de div komen product foto's met transparante achtergronden.

Eigenlijk is mijn vraag gewoon hoe bedien ik met een element een ander div?

[Joep]

http://www.w3schools.com/...filename=trycss_sel_hover

?

Edit: En dan wat prutsen, zodat 'ie een ander object verandert?

[ Voor 31% gewijzigd door Joep op 07-01-2012 15:40 ]

[Verwijderd]

Doormiddel van een hover de achtergrond laten veranderen zover was ik zelf ook gekomen. Maar het punt naar een ander object te verwijzen kom ik niet uit.

[martijnve]

Voor zover ik weet kun je (hele ranzige hack's daar gelaten) dit niet met css maken. Maar met een beetje simpele javascript is het zeer eenvoudig.

Je kunt met css niet object A beinvloeden door een hover over object B. Een uizondering hier op is als A in B zit maarja dat gaat in jou geval niet (omdat je met meerdere blokjes zit)

[ Voor 39% gewijzigd door martijnve op 07-01-2012 15:45 ]

[Verwijderd]

Daar was ik al bang voor, zolang het simpele javascript is moet het wel lukken. Maar jquery enz is link om in Magento te gebruiken.

[boto]

gebruik een anchor om een div een kleur te geven.

dus
<a>
<div></div>
</a>
a:hover div{background:#2e2e2e;}

[martijnve]

boto schreef op zaterdag 07 januari 2012 @ 15:49:
gebruik een anchor om een div een kleur te geven.

dus
<a>
<div></div>
</a>
a:hover div{background:#2e2e2e;}

Dat werkt alleen met een <a> per div zoals ik hier boven al aangaf.

[Joep]

http://www.pmob.co.uk/pob/disjointed1.htm

?

[DeEindbaas]

martijnve schreef op zaterdag 07 januari 2012 @ 15:44:
Voor zover ik weet kun je (hele ranzige hack's daar gelaten) dit niet met css maken. Maar met een beetje simpele javascript is het zeer eenvoudig.

Je kunt met css niet object A beinvloeden door een hover over object B. Een uizondering hier op is als A in B zit maarja dat gaat in jou geval niet (omdat je met meerdere blokjes zit)

Dit is prima te doen zonder hacks... zie hier:

Even wat voor je gemaakt:
http://jsfiddle.net/Pr8pR/embedded/result/

Code hier:
http://jsfiddle.net/Pr8pR/

[ Voor 80% gewijzigd door DeEindbaas op 08-01-2012 12:03 ]

[Verwijderd]

Wow top, erg bedankt. Dit is in combinatie met mootools gemaakt zie ik?

Ga proberen het te integreren.

[Bosmonster]

Nee, dat is gewoon puur CSS. jsFiddle laadt alleen standaard Mootools.. kun je negeren.

[DeEindbaas]

Verwijderd schreef op zondag 08 januari 2012 @ 13:48:
Wow top, erg bedankt. Dit is in combinatie met mootools gemaakt zie ik?

Ga proberen het te integreren.

Wat Bosmonster zegt... Dat hele Mootools verhaal mag je vergeten, het is puur CSS.

[Wiethoofd]

Dreamwire schreef op zondag 08 januari 2012 @ 12:00:
Dit is prima te doen zonder hacks... zie hier:
Code hier: http://jsfiddle.net/Pr8pR/

Mwah, vind ik niet echt een nette oplossing qua html, en hij blijft bij een klik niet de gekozen kleur, daar zal iets van JS met een toggle aan te pas moeten komen.

---

Mijn oplossing, met valid html en kortere css:

HTML:

<div id="wrap">
 <a class="color red"></a>
 <a class="color blue"></a>
 <a class="color green"></a>
 <div id="box"></div>
</div>

Cascading Stylesheet:

#wrap { width: 102px; margin: 5px auto; }
#box { width: 100px; height: 100px; border: 1px solid black; }
.color { width: 20px; height: 20px; border: 1px solid black; float: left; margin: 105px 4px 0 0; }

.red, .red:hover ~ #box { background: #F00; }
.blue, .blue:hover ~ #box { background: #00F; }
.green, .green:hover ~ #box { background: #0F0; }

[DeEindbaas]

Wiethoofd schreef op maandag 09 januari 2012 @ 15:58:
[...]

Mwah, vind ik niet echt een nette oplossing qua html, en hij blijft bij een klik niet de gekozen kleur, daar zal iets van JS met een toggle aan te pas moeten komen.

---

Mijn oplossing, met valid html en kortere css:

HTML:

<div id="wrap">
 <a class="color red"></a>
 <a class="color blue"></a>
 <a class="color green"></a>
 <div id="box"></div>
</div>

Cascading Stylesheet:

#wrap { width: 102px; margin: 5px auto; }
#box { width: 100px; height: 100px; border: 1px solid black; }
.color { width: 20px; height: 20px; border: 1px solid black; float: left; margin: 105px 4px 0 0; }

.red, .red:hover ~ #box { background: #F00; }
.blue, .blue:hover ~ #box { background: #00F; }
.green, .green:hover ~ #box { background: #0F0; }

Hij vraagt niet of ze blijven staan he maar alleen om een hover functie :-)

[Wiethoofd]

Dreamwire schreef op maandag 09 januari 2012 @ 16:43:
Hij vraagt niet of ze blijven staan he maar alleen om een hover functie :-)

Dan is mijn oplossing helemaal veel netter, de #box zet je namelijk de afbeelding met transparante achtergrond in en de kleurboxen werken altijd, gewoon meer toevoegen en de ~ gebruiken.

[DeEindbaas]

Wiethoofd schreef op maandag 09 januari 2012 @ 16:44:
[...]

Dan is mijn oplossing helemaal veel netter, de #box zet je namelijk de afbeelding met transparante achtergrond in en de kleurboxen werken altijd, gewoon meer toevoegen en de ~ gebruiken.

Dat klopt een stuk simpeler. (ik heb ook niet gezegd dat het niet netter kan)