[CSS] bij hover ander divje andere kleur geven

[nipro]

Hoi Allemaal!

De titel is misschien niet zo duidelijk, maar ik kon niet echt een betere TT bedenken. Mijn zoektocht leverde ook niet echt het gewenste resultaat omdat ik ook niet echt wist waarop ik moest gaan zoeken.

Wat ik heb/Wat ik wil bereiken:

Ik heb op dit moment 2 divjes: div1 en div2. Wanneer ik met mijn muis over div1 heen ga, moet div2 van kleur veranderen…

[code:1:ab491ccc5b]
<div id="div1">
<div id="div2">
</div>
</div>

<style type="text/css">
#div1, #div2 { width: 200px; height: 200px; }
#div1 { background: red; height: 400px; }
#div2 { background: green; }
#div1:hover #div2 { background: blue; }
</style>
[/code:1:ab491ccc5b]

Bovenstaande code werkt, maar liever zou ik zien dat div2 niet in div1 hoeft te staan, dus dat de html code zoiets zou zijn:

[code:1:ab491ccc5b]
<div id="div1">
</div>
<div id="div2">
</div>
[/code:1:ab491ccc5b]

Mijn vraag: welke selector hoort hierbij!? :sealed:

[jean-jacques]

Dat is op het moment niet echt mogelijk, en wat jij nu hebt voor code werkt ook niet in IE, ik denk toch dat je voor dit soort dingen bij javascript moet zijn...

[nipro]

[quote:f70f37267c="Jean-Jacques"]Dat is op het moment niet echt mogelijk, en wat jij nu hebt voor code werkt ook niet in IE, ik denk toch dat je voor dit soort dingen bij javascript moet zijn...[/quote:f70f37267c]

IE support is wel te krijgen via whatever:hover, als ik me niet vergis

[littlejohnny]

Kan gemakkelijk met javascript

[code:1:d79aa605b9]<div id=“div1” style=“width:200px; height:200px; background-color:#000000;” onmouseover=“this.style.backgroundColor=’#CCCCCC’;” onmouseout=“this.style.backgroundColor=’#000000’;”>
<p>blala</p>
</div>[/code:1:d79aa605b9]

(verander #000000 en #CCCCCC (gebruik ik altijd als test kleuren :P) in je eigen kleur)

alstu

Oh, had het niet goed gelezen, ander div je andere kleur…

gewoon this.style veranderen met getElementById…

[rix04]

[quote:33adfc7999="LittleJohnny"]Kan gemakkelijk met javascript

[code:1:33adfc7999]<div id=“div1” style=“width:200px; height:200px; background-color:#000000;” onmouseover=“this.style.backgroundColor=’#CCCCCC’;” onmouseout=“this.style.backgroundColor=’#000000’;”>
<p>blala</p>
</div>[/code:1:33adfc7999]

(verander #000000 en #CCCCCC (gebruik ik altijd als test kleuren :P) in je eigen kleur)

alstu [/quote:33adfc7999]

ja was ik net aan het typen… en dan ipv van [i:33adfc7999]this[/i:33adfc7999] kan je dan ook [i:33adfc7999]document.getElementById(‘div2’)[/i:33adfc7999]
om div2 te besturen…

[littlejohnny]

Het wordt dus:

[code:1:d0553ec02b]<div id=“div1” style=“width:200px; height:200px; background-color:#000000;” onmouseover=“document.getElementById(‘div2’).style.backgroundColor=’#CCCCCC’;” onmouseout=document.getElementById(‘div2’).style.backgroundColor=’#000000’;">
</div>
<div id=“div2” style=“width:200px; height:200px; background-color:#000000;”>
</div>[/code:1:d0553ec02b]

[ipod-jimmy]

[quote:b068251786="nipro"][quote:b068251786="Jean-Jacques"]Dat is op het moment niet echt mogelijk, en wat jij nu hebt voor code werkt ook niet in IE, ik denk toch dat je voor dit soort dingen bij javascript moet zijn...[/quote:b068251786]

IE support is wel te krijgen via whatever:hover, als ik me niet vergis :)[/quote:b068251786]

Dan vergis je je, daar is javascript voor nodig.

[wkamsma]

whatever:hover is javascript

[ipod-jimmy]

[quote:9176ba8198="wKamsma"]whatever:hover is javascript[/quote:9176ba8198]

:? Nee, dat is css.

[code:1:9176ba8198]
<script type="text/javascript" charset="utf-8">
alert("Nee, dat is css!");
</script>
[/code:1:9176ba8198]

[littlejohnny]

Je zal hier toch echt javascript moeten gebruiken.

[jago]

[quote:6b92cea584="nipro"][quote:6b92cea584="Jean-Jacques"]Dat is op het moment niet echt mogelijk, en wat jij nu hebt voor code werkt ook niet in IE, ik denk toch dat je voor dit soort dingen bij javascript moet zijn...[/quote:6b92cea584]

IE support is wel te krijgen via whatever:hover, als ik me niet vergis :)[/quote:6b92cea584]

Normaal zou je dat met alle elementen moeten kunnen bv:
div1:hover {bla bla;}
“bla bla” wordt dus gedaan als je over div1 gaat

Alle brouwers kunnen hier mee overweg buiten IE natuurlijk … daar werkt :hover enkel bij [b:6b92cea584]a[/b:6b92cea584] elementen.

> voor het probleem van dit topic >> javasript is je nieuwe vriend

[nipro]

Dank voor de oplossingen! Toch raar dat zoiets 'simpels' niet mogelijk is dmv. puur CSS.. :(

[ipod-jimmy]

Is het wel, alleen met IE niet.

Linkje

[nipro]

[quote:3300dc65b2="iPod Jimmy"]Is het wel, alleen met IE niet.

Linkje[/quote:3300dc65b2]

even goed lezen, het gaat erom dat, als ik over div1 met m’n muis beweeg, div2 van kleur veranderd.

[ipod-jimmy]

Dan doe je toch:

html

[code:1:d0c4fc7552]
<div id="c1">

<div id="c2">

</div>

</div
[/code:1:d0c4fc7552]

CSS

[code:1:d0c4fc7552]
#c1:hover #c2 {
background: jouwkleur;
}
[/code:1:d0c4fc7552]

ofietsdergelijks.

[littlejohnny]

@Jimmy,

Ik zou toch echt even de eerste post lezen als ik jou was… zucht

[nipro]

[quote:e8f7c2321e="iPod Jimmy"]Dan doe je toch:

html

[code:1:e8f7c2321e]
<div id="c1">

<div id="c2">

</div>

</div
[/code:1:e8f7c2321e]

CSS

[code:1:e8f7c2321e]
#c1:hover #c2 {
background: jouwkleur;
}
[/code:1:e8f7c2321e]

ofietsdergelijks.[/quote:e8f7c2321e]

lees de openingspost eens, welke ‘oplossing’ geef ik daar zelf al? juist

edit: wat LittleJohnny zegt dus

[danielpunt]

[quote:75b1d2fe25="LittleJohnny"]Het wordt dus:

[code:1:75b1d2fe25]<div id=“div1” style=“width:200px; height:200px; background-color:#000000;” onmouseover=“document.getElementById(‘div2’).style.backgroundColor=’#CCCCCC’;” onmouseout=document.getElementById(‘div2’).style.backgroundColor=’#000000’;">
</div>
<div id=“div2” style=“width:200px; height:200px; background-color:#000000;”>
</div>[/code:1:75b1d2fe25][/quote:75b1d2fe25]kan het nog ranziger? :sealed:

Zo zou ik het doen:

[code:1:75b1d2fe25]
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: #000000;
}

div.actie {
background-color: #09f;
}
</style>

<script type="text/javascript">
function prepareBlok(blok1, blok2) {
if(!document.getElementById) return false;
var div = document.getElementById(blok1);
var div2 = document.getElementById(blok2);

div.onmouseover = function() {
div2.className = ‘actie’;
}
div.onmouseout = function() {
div2.className = ‘’;
}
}

window.onload = function() {
prepareBlok(‘blok1’, ‘blok2’);
}
</script>

<div id="blok1"></div>
<div id="blok2"></div>

[/code:1:75b1d2fe25]
Zie het in actie!

zoals het hoort
Content, stijl en gedrag gescheiden!

[littlejohnny]

tja.. ik heb geen zin om voor iemand anders 4x zoveel tijd te doen.. als het een klant was was het natuurlijk een ander verhaal,

maar je hebt natuurlijk volkomen gelijk

[ipod-jimmy]

[quote:32e5fff390="nipro"][quote:32e5fff390="iPod Jimmy"]Dan doe je toch:

html

[code:1:32e5fff390]
<div id="c1">

<div id="c2">

</div>

</div
[/code:1:32e5fff390]

CSS

[code:1:32e5fff390]
#c1:hover #c2 {
background: jouwkleur;
}
[/code:1:32e5fff390]

ofietsdergelijks.[/quote:32e5fff390]

lees de openingspost eens, welke ‘oplossing’ geef ik daar zelf al? juist

edit: wat LittleJohnny zegt dus :)[/quote:32e5fff390]

Hm… Beetje slaperig toen. Sorry.