[CSS] Div kleur bepalen met hover of click

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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:

Afbeeldingslocatie: http://img804.imageshack.us/img804/5597/voorbeeldx.jpg

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?

Acties:
  • 0 Henk 'm!

  • Joep
  • Registratie: December 2005
  • Laatst online: 13-09 13:21
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 ]


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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.

Acties:
  • 0 Henk 'm!

  • martijnve
  • Registratie: December 2004
  • Laatst online: 00:34
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 ]

Mini-ITX GamePC: Core i5 3470 | 16GB DDR3 | GTX 970 4GB | Samsung 830 128GB | Dell u2711 (27", IPS,1440p), 2343BW


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
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.

Acties:
  • 0 Henk 'm!

  • boto
  • Registratie: Januari 2010
  • Laatst online: 17-12-2024
gebruik een anchor om een div een kleur te geven.

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

Acties:
  • 0 Henk 'm!

  • martijnve
  • Registratie: December 2004
  • Laatst online: 00:34
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.

Mini-ITX GamePC: Core i5 3470 | 16GB DDR3 | GTX 970 4GB | Samsung 830 128GB | Dell u2711 (27", IPS,1440p), 2343BW


Acties:
  • 0 Henk 'm!

  • Joep
  • Registratie: December 2005
  • Laatst online: 13-09 13:21

Acties:
  • 0 Henk 'm!

  • DeEindbaas
  • Registratie: December 2007
  • Laatst online: 13-09 13:55
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 ]


Acties:
  • 0 Henk 'm!

Verwijderd

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

Ga proberen het te integreren.

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45

Bosmonster

*zucht*

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

Acties:
  • 0 Henk 'm!

  • DeEindbaas
  • Registratie: December 2007
  • Laatst online: 13-09 13:55
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.

Acties:
  • 0 Henk 'm!

  • Wiethoofd
  • Registratie: Juli 2007
  • Laatst online: 14-08 12:22

Wiethoofd

Broadcast TOM

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:
1
2
3
4
5
6
<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:
1
2
3
4
5
6
7
#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; }

Volg me op Twitter/X & Bluesky


Acties:
  • 0 Henk 'm!

  • DeEindbaas
  • Registratie: December 2007
  • Laatst online: 13-09 13:55
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:
1
2
3
4
5
6
<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:
1
2
3
4
5
6
7
#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 :-)

Acties:
  • 0 Henk 'm!

  • Wiethoofd
  • Registratie: Juli 2007
  • Laatst online: 14-08 12:22

Wiethoofd

Broadcast TOM

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.

Volg me op Twitter/X & Bluesky


Acties:
  • 0 Henk 'm!

  • DeEindbaas
  • Registratie: December 2007
  • Laatst online: 13-09 13:55
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) ;)
Pagina: 1