[js] onmouseover fired niet correct bij geneste DIV

[Zr40]

Ik probeer een DIV, geplaatst binnen een andere DIV, van kleur te laten veranderen als de muis eroverheen gaat. Oorspronkelijk probeerde ik dit via CSS (DIV#naam:hover), maar dit bleek niet te werken. (:hover is alleen voor A geldig) Hierdoor ben ik genoodzaakt Javascript te gebruiken.
Het probleem is dat de DIV niet verandert van kleur als ik de muis over een leeg stuk van deze DIV beweeg. Dit gebeurt wel als ik de muis over 'Blaat' beweeg.

Onderstaande code werkt perfect als de DIV niet genest is binnen een andere DIV, maar dit is geen optie. Onderstaande code werkt ook zoals gewenst binnen Mozilla, maar de pagina's waar dit geplaatst wordt worden alleen maar met Internet Explorer bekeken.

HTML:

<DIV STYLE='width:400px'>
<DIV STYLE='background-color:yellow'
onmouseover='style.backgroundColor="blue"'
onmouseout='style.backgroundColor="yellow"'>Blaat</DIV>
</DIV>

onmouseenter en onmouseleave ipv onmouseover en onmouseout gebruiken geeft hetzelfde effect.

Waardoor komt dit, en is dit te verhelpen?

[ Voor 15% gewijzigd door Zr40 op 09-07-2004 10:59 . Reden: Wat vergeten ]

[faabman]

HTML:

<div onmouseover="this.style.backgroundColor = 'blue';" />

je moet wel ff this toevoegen...

[André]

Dit werkt bij mij prima in IE hoor. En je kunt de :Hover ook wel voor andere elementen gebruiken met behulp van behaviors.

[BtM909]

André schreef op 09 juli 2004 @ 10:51:
Dit werkt bij mij prima in IE hoor. En je kunt de :Hover ook wel voor andere elementen gebruiken met behulp van behaviors.

Zie ook: [rml][ css] meer css met htc voor IE[/rml]

[Zr40]

Ik ben vergeten te vermelden dat de DIV wel van kleur verandert als ik de muis beweeg over 'Blaat', maar niet over het lege deel.
_{Topicstart aangepast}

faabman schreef op 09 juli 2004 @ 10:50:
[...]
je moet wel ff this toevoegen...

Dit maakt geen verschil.

[ Voor 8% gewijzigd door Zr40 op 09-07-2004 10:59 ]

[disjfa]

Bij mij werkt hij dan weer niet in IE.... Maar weer wel als je er een hoogte aan meegeeft.

@André: Dan hoef je juist geen width op te geven sinds div een block element is

[ Voor 33% gewijzigd door disjfa op 09-07-2004 11:01 ]

[André]

Dan moet je de mouseover op die andere div zetten, of de blaat div op width:100% zetten:

code:

<div style='width:400px'>
  <div style="background-color:yellow; width:100%;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='yellow'">Blaat</div>
</div>

of

code:

<div style='width:400px' style="background-color:yellow;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='yellow'">
  <div>Blaat</div>
</div>

[ Voor 93% gewijzigd door André op 09-07-2004 11:02 ]

[Zr40]

André schreef op 09 juli 2004 @ 10:59:
Dan moet je de mouseover op die andere div zetten, of de blaat div op width:100% zetten.

Dit is ook niet mogelijk, omdat het de bedoeling is dat er meerdere DIVs in de buitenste DIV komen, die vervolgens gebruikt wordt om het geheel te positioneren.

edit:

width:100% gaat ook niet, omdat de parent DIV dan veel te breed wordt. Een vaste width aan die parent DIV is ook niet mogelijk, omdat die zich aan moet passen aan de inhoud, wat goed werkt.
_{In de topicstart heeft de parent DIV een width van 400px, dit was bedoeld als 'rem', zodat die DIV niet automatisch pagina-breed is. In mijn pagina is width ongedefinieerd, in combinatie met position:absolute.}

[ Voor 40% gewijzigd door Zr40 op 09-07-2004 11:10 ]

[André]

Het lijkt eigenlijk ook wel een bug omdat de hele achtergrond wel geel is, maar zodra hij veranderd wordt veranderd alleen het gedeelte waar de tekst staat blauw wordt. Je kunt dat probleem wel ondervangen door een inline element als span te gebruiken. En anders zul je toch een breedte mee moeten geven aan de div.

[Zr40]

André schreef op 09 juli 2004 @ 11:29:
Het lijkt eigenlijk ook wel een bug omdat de hele achtergrond wel geel is, maar zodra hij veranderd wordt veranderd alleen het gedeelte waar de tekst staat blauw wordt. Je kunt dat probleem wel ondervangen door een inline element als span te gebruiken. En anders zul je toch een breedte mee moeten geven aan de div.

Een SPAN met width:100% binnen de DIV zorgt er ook voor dat de parent DIV 100% breed wordt. Is er een manier om de parent DIV niet te vergroten zonder een vaste breedte op te geven?

[André]

Zr40 schreef op 09 juli 2004 @ 11:56:
[...]

Een SPAN met width:100% binnen de DIV zorgt er ook voor dat de parent DIV 100% breed wordt. Is er een manier om de parent DIV niet te vergroten zonder een vaste breedte op te geven?

Nee, een span zonder 100% bedoelde ik.

[Zr40]

André schreef op 09 juli 2004 @ 12:00:
[...]

Nee, een span zonder 100% bedoelde ik.

Dat heeft bij mij geen effect.

HTML:

<DIV STYLE='position:absolute;left:40%;background-color:red'>
<DIV STYLE='background-color:yellow'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>Blaat</DIV>
<DIV STYLE='background-color:yellow'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>Nog meer blaat</DIV>
<DIV STYLE='background-color:yellow'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>
<SPAN>SPANnend</SPAN></DIV>
</DIV>

[ Voor 92% gewijzigd door Zr40 op 09-07-2004 13:56 . Reden: Wat doet width:0% daar? Verwijderd, maar maakt geen verschil wat betreft beschreven probleem ]

[André]

Je moet de geneste divs vervangen door spans, zo bedoel ik dat.

[disjfa]

code:

<DIV STYLE='position:absolute;left:40%;background-color:red'>
<DIV STYLE='background-color:yellow;width:0%;height:auto;'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>Blaat</DIV>
<DIV STYLE='background-color:yellow;height:auto;'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>Nog meer blaat</DIV>
<DIV STYLE='background-color:yellow;width:0%;height:auto;'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>
<SPAN>SPANnend</SPAN></DIV>
</DIV>

[Zr40]

André schreef op 09 juli 2004 @ 13:53:
Je moet de geneste divs vervangen door spans, zo bedoel ik dat.

Dat helpt helaas ook niet. Ik blijf dan hetzelfde niet-onmouseover deel houden width:100% meegeven aan die SPANs geeft overigens hetzelfde effect als bij de DIVs

disjfa schreef op 09 juli 2004 @ 13:57:

code:

<DIV STYLE='position:absolute;left:40%;background-color:red'>
<DIV STYLE='background-color:yellow;width:0%;height:auto;'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>Blaat</DIV>
<DIV STYLE='background-color:yellow;height:auto;'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>Nog meer blaat</DIV>
<DIV STYLE='background-color:yellow;width:0%;height:auto;'
onmouseover='this.style.backgroundColor="blue"'
onmouseout='this.style.backgroundColor="yellow"'>
<SPAN>SPANnend</SPAN></DIV>
</DIV>

Dit lost het ook niet op

edit:
Bah, onclick wil ook niet werken in het niet-onmouseover gebied

[ Voor 71% gewijzigd door Zr40 op 09-07-2004 14:09 . Reden: disjfa postte net voor me, reactie toegevoegd. ]

[Verwijderd]

ik meen me ergens te herinneren dat position: relative toevoegen aan die div wel werkte (vermoeden hoor, weet het niet meer zeker en momenteel ook ff geen tijd om voor je te gaan testen, mag je zelf doen )

[André]

Verwijderd schreef op 09 juli 2004 @ 16:23:
ik meen me ergens te herinneren dat position: relative toevoegen aan die div wel werkte (vermoeden hoor, weet het niet meer zeker en momenteel ook ff geen tijd om voor je te gaan testen, mag je zelf doen )

Dan zou het wel een bug zijn, want alle elementen staan standaard al op position:relative.

[Verwijderd]

ik ontken ook niet dat het een bug is

als je in ie een child absoluut wil positioneren dan doet die dat ten opzichte van het eerste parent element met een position ingesteld in de css, dus ook in dat geval zet je er position: relative bij. En ook in andere situaties is het toevoegen wel eens bugontwijkend gebleken

edit:

stiekum toch ff getest: werkt hier

[ Voor 8% gewijzigd door Verwijderd op 09-07-2004 16:44 ]