Bakgrunnsskifte på et annet element ved hovering

[Blib]

Okay, på sida mi har jeg blant annet to divs. Den ene har en bakgrunnsfarge. Så ønsker jeg at denne bakgrunnsfargen skal skifte til en annen når du hooverer over den andre div'en. Er det mulig?

[haugsand]

Er den ene div'en inne i den andre?

 

Isåfall kan du ha ...

 

div.klassenavn div {
 background-color: #f00;
}

 

... som gjør om bakgrunnsfargen til den innerste div'en her: <div class="klassenacn"><div><p>Innhold</p></div></div>

[Blib]

Nei, de ligger etter hverandre, ikke inni

Endret 4. juli 2004 av Blib

[Haraldson]

Er denne også relevant?

 

» http://forum.hardware.no/index.php?showtopic=266017

[Blib]

Nja, litt annet problem der iogmed at det er bilder de snakker om, mens jeg vil skifte bakgrunnsfarge. Vet ikke om det vil gå å velge position på en bakgrunnsfarge som det står i guiden arve linker til? Javascript er heller ikke å foretrekke.

 

Er det forresten mulig å ha hovering på ting som ikke er linker i det hele tatt forresten?

Endret 4. juli 2004 av Blib

[LoS]

I det meste utenom IE så kan du kjøre hover på alt.

[Zethyr]

Du kan flytte den ene ut av den andre med position:relative; eller med margin, og så gjøre slik satyrium foreslår.

 

IE støtter bare :hover på a-elementer som standard, men man kan fikse det med noe IE-spesifikke greier. Jeg så noe Javascript-greier som legges til som en egenskap i CSS'en, men jeg finner ikke igjen URL'en.

Endret 4. juli 2004 av Zethyr

[sindre_m]

Eller du kan gjøre det veldig enkelt slik, men da med Javascript:

 

<div id="div1" onmouseover="getElementById('div2').style.backgroundColor = 'blue'" onmouseout="getElementById('div2').style.backgroundColor = 'yellow'"></div>
<div id="div2"></div>

Endret 4. juli 2004 av sindre_m

[Zethyr]

Javascript er heller ikke å foretrekke.

[Blib]

I det meste utenom IE så kan du kjøre hover på alt.

Ting er nødt til å væe IE-kompatibelt ettersom såpass stor andel folk bruker den dessverre.

 

Den javascriptsaken din sindre_m, trenger jeg ikke først definere ett eller annet sted at "Her kommer noe javascript" eller noe? <script> eller noe slikt?

 

Heh, joda, men siden jeg vil at ting skal funke med IE så blir jeg vel nødt til det siden CSS ikke fungerer da?

Endret 4. juli 2004 av Blib

[sindre_m]

Ting er nødt til å væe IE-kompatibelt ettersom såpass stor andel folk bruker den dessverre.

 

Den javascriptsaken din sindre_m, trenger jeg ikke først definere ett eller annet sted at "Her kommer noe javascript" eller noe? <script> eller noe slikt?

Nei, ikke så lenge du legger det rett i onMouseOver. Du kan eventuelt lage en funksjon, som du legger mellom <script language="javascript"></script>, men siden det kun er snakk om en bestemt div, med en fargeendring, er det vel ikke så mye vits..

Endret 4. juli 2004 av sindre_m

[Blib]

<div id='overskrift'>Avstemning</div>
<div id='poll' onmouseover="getElementById('overskrift').style.backgroundColor = '#347879'" onmouseout="getElementById('overskrift').style.backgroundColor = '#8DB3B4'">innhold</div>

 

Men det ser ikke ut til å fungere...

Overstyrer denne forresten CSS eller noe? jeg har jo satt opp en fast bakgrunnsfarge der... :S

Endret 4. juli 2004 av Blib

[sindre_m]

<div id='overskrift'>Avstemning</div>
<div id='poll' onmouseover="getElementById('overskrift').style.backgroundColor = '#347879'" onmouseout="getElementById('overskrift').style.backgroundColor = '#8DB3B4'">innhold</div>

 

Men det ser ikke ut til å fungere...

Overstyrer denne forresten CSS eller noe? jeg har jo satt opp en fast bakgrunnsfarge der... :S

Hmm.. Prøvde akkurat den koden din her nå, og det fungerte. Også om jeg satte en bakgrunnsfarge på "overskrift" div'en via CSS.

[Blib]

Kan det ha noe med at der hvor jeg skrev "innhold" har jeg et skjema?

[Blib]

Aha! Oi.. Jeg teste nå igjen med IE og da fungerte det. Men ikke med Opera. Skal det være slik? :S

[Zethyr]

Det fungerer ikke med alle allikevel, siden 8-10% har deaktivert Javascript.

Løsningen på problemet over, er jo å lage det med Javascript _og_ CSS

[Blib]

Mja, joda. Men nå er det heldigvis slik at det ikke akkurat er en vital funksjon, bare litt stilig og egentlig unyttig. I tillegg tviler jeg på at det er store andelen folk av de som besøker mn hjemmeside som har skrudd av Javascript

 

Men Opera derimot. Så derfor trenger jeg dette til å funke der også, hvis ikke bare dropper jeg det tror jeg.

 

Hmm, vent litt. Det med JS og CSS er faktisk kanskje en ide. Jeg har allerede lagt til en conditional comment på sida for å få den til å se OK ut i IE allerede. Hva hvis jeg i IE-biten bruker JS og i Opera-biten bruker CSS og hoovering med en ytre div på de to.. Hmmmmm. Må prøve ut denne ideen, med mindre sindre_m driver og skriver en flittig på en fungerende løsning nå *håpe*

Endret 4. juli 2004 av Blib

[sindre_m]

Mja, joda. Men nå er det heldigvis slik at det ikke akkurat er en vital funksjon, bare litt stilig og egentlig unyttig. I tillegg tviler jeg på at det er store andelen folk av de som besøker mn hjemmeside som har skrudd av Javascript

 

Men Opera derimot. Så derfor trenger jeg dette til å funke der også, hvis ikke bare dropper jeg det tror jeg.

 

Hmm, vent litt. Det med JS og CSS er faktisk kanskje en ide. Jeg har allerede lagt til en conditional comment på sida for å få den til å se OK ut i IE allerede. Hva hvis jeg i IE-biten bruker JS og i Opera-biten bruker CSS og hoovering med en ytre div på de to.. Hmmmmm. Må prøve ut denne ideen, med mindre sindre_m driver og skriver en flittig på en fungerende løsning nå *håpe*

Hehe.. Prøvde litt, men ser ut som om Opera ikke gjenkjenner "getElementById" (??), synes det er litt rart, men vet ikke sikkert... Men hvis du får det til med CSS så er jo det greit nok.

[Blib]

Hmm, nei. Ideen min var ikke fullt så god i praksis som i live. Vet ikke helt hvordan jeg skal løse det :S

[Zethyr]

IE takler ikke :hover i CSS uansett, så bare legg det inn i stilsettet. Så lar du Javascriptet stå allikevel.

 

teskje:

 

div#en:hover div#to{

background: ...;

... (posisjonering utenfor den andre diven);

}

 

<div id=en onMouseOver="...>

<div id=to onMouseOver="...>

</div>

</div>

 

du kan vel se hva som funker best av position:relative eller flittig bruk av margin.

 

edit: wow! ad1.hardware.no lever igjen :!: når dør den igjen, tro ?

Endret 4. juli 2004 av Zethyr