Citat:
|
Ursprungligen postat av cezar
Citat:
|
Ursprungligen postat av Kaffe
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>
|
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.