WN - DIV mouse over background-color

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - DIV mouse over background-color (https://www.wn.se/forum/showthread.php?t=16088)

div:hover { background-color : lime; }

ska tydligen göra att bakrundsfärgen byts när man drar musen över diven.

Hur skriver jag koden om jag vill ha css'n i style="..." och att det även ska sättas in i en class.

div.class:hover { ... } eller något liknande?

Skall du ha det som en inline-style så behöver du ju inte ha det i en klass (ganska säker på att det blir tväromöjligt ändå). Dessutom har du väldigt svårt att peta in en CSS-regel bland en massa attribut (som inline-style är). Det är absolut som en klass du bör ha det.

Skall du ha det i en klass så är det just; div.class:hover som skall vara rätt.

Men, däremot klarar IE6 (och nedåt) inte av :hover på andra element än Anchors (länkar). Då behöver du andra lösningar, som (till exempel) denna: http://www.htmldog.com/articles/suckerfish/hover/

Citat:

Originally posted by Kaffe@Sep 7 2006, 15:21
Skall du ha det som en inline-style så behöver du ju inte ha det i en klass (ganska säker på att det blir tväromöjligt ändå). Dessutom har du väldigt svårt att peta in en CSS-regel bland en massa attribut (som inline-style är). Det är absolut som en klass du bör ha det.

Skall du ha det i en klass så är det just; div.class:hover som skall vara rätt.

Men, däremot klarar IE6 (och nedåt) inte av :hover på andra element än Anchors (länkar). Då behöver du andra lösningar, som (till exempel) denna: http://www.htmldog.com/articles/suckerfish/hover/

Värkar inte som det fungerar i Opera heller.

Såhär ser det ut nu:

CSS
div.ps:hover { background-color: #FFFFFF; }

HTML
<div class="ps" style="background-color: #3F3D3D; border: 1px solid black; width: 420px; margin-left: auto; margin-right: auto;"> <span style="color: #F4F501;">{title}</span> </div>

Varför inte göra det med OnMouseOver?

Altså:
<div class="ps" style="background-color: #3F3D3D; border: 1px solid black; width: 420px; margin-left: auto; margin-right: auto;" onmouseover="this.style.backgroundColor='#FFFFFF'; " onmouseout="this.style.backgroundColor='#3F3D3D';"><span style="color: #F4F501;">{title}</span> </div>

Fungerade BRA. Tack!

Citat:

Ursprungligen postat av cezar

Citat:

Ursprungligen postat av Kaffe

Inte så konstigt. Inline styles väger alltid tyngst, och skriver över alla möjliga CSS-regler som definierats externt.

Opera är för närvarande enda webbläsaren av de större aktörerna som klarar ACID2 testet, så CSS har den inga problem med (ACID2: http://www.webstandards.org/files/acid2/test.html).

För att korrigera din kod (dessutom):

Kod:

<div class="ps"><strong>{title}</strong></div>

CSS:

Kod:

 div.ps { background: #3f3d3d; border: 1px solid black; width: 420px; margin: 0 auto; }

 div.ps:hover { background: #fff; }

 div.ps strong { color: #F4F501; }

Sådär, skall det se ut. Sedan väljer du själv hur du implementerar din :hover-effekt. Här är ännu en lösning, htc den här gången: http://www.xs4all.nl/~peterned/csshover.html

Får ursäkta att jag ifall jag är pushig, men halvdana och i slutändan omständiga lösningar (inget personligt) som onmouseover faller inte mig i smaken. Separation av presentation och innehåll är mottot.

Ajja. Fungerar ju klockrent nu med javascriptet :D

Precis som jag vill ha det iallafall.