Permalänk
Medlem

[CSS]Hover till inline style.

Tjenare!

Man kan ju använda inline styles med css, t: ex

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Men hur gör man om man vill ha en hover effekt ochså?

Jag vet att många kommer att säga att man inte ska använda inline styles utan lägga allt i en separat css fil, men det här är ett specialfall.

/MVH Tomas

Visa signatur

//Toombass

Permalänk
Medlem

1. Lägg dina stilar i en separat CSS-fil även i specialfall ;).
2. Det går inte.

Permalänk
Medlem

1: You har troligen rätt (men det finns specialspecialfall då det inte är helt rimligt)

2: Generera css-kod mha severspråket och dumpa ut i början av dokumentet (löser ofta problemen i specialfallen eftersom de normalt är specialfall pga att serverkoden genererar ut väldigt dynamiskt material)

3: Lös det med javascript (onmouseover)

Permalänk
Medlem

totoo:
Poängen med hela grejen var att jag inte ville använda javascript, efterssom det inte kommer fungera för dem som inte har stöd för det annars.

Men nu när jag tänker efter så kanske det är lika bra. Efterssom enda effekten för dom som inte har stöd för javascript kommer bli att dom inte kan se hovereffekten på länken, vilket egentligen inte är jätteviktigt.

Det är mest en grafisk effekt och har ingen inverkan på funktionaliteten, förutom att det kanske blir lite svårare att se att det är en länk. Men åandra sidan så ser man ju "handen", och det är väldigt få som inte har stöd för javascript.

Poängen är att jag vill plocka fram olika backgrundsbilder, efter id: t som plockas ut ur databasen. Tänkte först göra en php fil som jag använder som css fil och plocka inte den i början av dokumentet tillsammans med dom andra css filerna. Men sen kom jag på att det inte kommer funka efterssom id: t genereras fram längre ner i koden.

Ett problem med att använda javascript är att hover effekten ligger i samma bild som den ice hovrade varianten. Detta för att undvika "flimmer", men den tekniken känner ni ju förmodligen redan till.

Men det kanske går att lösa iallafall?

/MVH Tomas

Visa signatur

//Toombass

Permalänk
Medlem

du kan i javascriptet ändra bakgrundsposition ja...

http://codepunk.hardwar.org.uk/css2js.htm

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
2. Det går inte.

Jasså?

(WD:n har ungefär lika mycket värde som detta inlägg. Dvs. inget.)

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av cic
Jasså?

(WD:n har ungefär lika mycket värde som detta inlägg. Dvs. inget.)

Som du själv antyder, Working Draft = moot.
Det ska ju gärna kunna stödjas av webbläsare också :).

Permalänk
Medlem

//Fel såg att du inte ville ha .css fil, aya låter detta stå kvar ändå!

Vet inte om jag fattade rätt.. Först flyttar du allt till en .css fil (underlättar)

Exempel, .CSS filen:

#text {color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;}
#text:hover {color: #FCD2A0;}

Exempel, html filen:

<div id="text">Hej</div>

Tror det ska stämma i alla fall!

/Snark