S silfver Medlem sedan apr. 2003 12 679 inlägg Frågan 8 juli 2003 17:05 #1 Jag vill att när man drar musen över cellen så ska den visa den här färgen. Men jag vill också att den ska visa ett streck på färgen, hm. Om ni förstår hur jag menar? Alltså att färgen ska ha en kant; ungefär som border: 1 solid #000000...
onMouseOver="this.style.backgroundColor='CEDDE4';" onMouseOut="this.style.backgroundColor='FFFFFF';"
<td width="100%" onMouseOver="this.style.backgroundColor='F5F5F5';" onMouseOut="this.style.backgroundColor='FFFFFF';">
Startsida</td>
funkar utmärkt, men jag vill att den ska visa färgen med en svart ram. Förstår ni?
Mvh
B Bäckman Medlem sedan nov. 2001 274 inlägg <td width="100%" onMouseOver="this.style.backgroundColor='F5F5F5'; this.style.borderStyle='solid'; this.style.borderWidth='1px'; this.style.borderColor='#000000';" onMouseOut="this.style.backgroundColor='FFFFFF'; this.style.borderStyle='none'">
Startsida</td>
Något sånt kanske?
Web-Tor Medlem sedan nov. 2000 13 890 inlägg Flyttas från HTML-forumet.
Koplik Medlem sedan juli 2001 1 129 inlägg <td width="100%" onMouseOver="this.style.backgroundColor='F5F5F5'; this.style.border='#000000 1px Solid';" onMouseOut="this.style.backgroundColor='FFFFFF'; this.style.borderStyle='none'">
Startsida</td>
Funkar nog också!
S silfver Medlem sedan apr. 2003 12 679 inlägg Tack för era svar! Dom funkade prima.
Men jag har ett problem till för er. Jag vill inte ha border runt HELA utan bara där uppe och nere. Hur ska jag göra då? Kan jag inte göra någon CSS liknande? Så jag skriver this.style.border='border';" eller något i den stilen? Eller måste man skriva ut hela:
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
så?
mvh!
edit:
... this.style.border='solid 1px #000000';" hur ska man skriva för att bara få kantlinje på över- och underdel?
U ulfe Medlem sedan mars 2003 48 inlägg <td width="100%" onMouseOver="this.style.backgroundColor='F5F5F5'; this.style.borderTop='#000000 1px Solid'; this.style.borderBottom='#000000 1px Solid';" onMouseOut="this.style.backgroundColor='FFFFFF'; this.style.borderStyle='none'">Startsida</td>
U ulfe Medlem sedan mars 2003 48 inlägg Kom på en liten ändring i koden, det jag skrev ovan funkar som
du vill ha det men man ser en förflyttning av texten som jag inte
tyckte var snygg, lägg till en style (td-padding har jag kallat den.
Då "ploppar" inte ordet startsidan neråt när du hovrar över den.
<style type="text/css">
.td-padding
{
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}
</style>
' all annan kod....
<td class="td-padding" width="100%" onMouseOver="this.style.backgroundColor='F5F5F5'; this.style.borderTop='#000000 1px Solid'; this.style.borderBottom='#000000 1px Solid';" onMouseOut="this.style.backgroundColor='FFFFFF'; this.style.borderTop='#FFF 1px Solid'; this.style.borderBottom='#FFF 1px Solid';">Startsida</td>
S silfver Medlem sedan apr. 2003 12 679 inlägg border på MouseOnOver
Hejsan!
Såg att jag skapat en tråd om det här en gång tidigare .
Men nu när jag försöker pröva era exempel så får jag inget av dem att fungera. Varför inte?
Jag vill bara ha en effekt på min div; när jag drar musen över diven så ska det komma en border runt. Är det möjligt?
Mvh
r/ Har prövat effekten i IE 6.0 och FF.
Detta bör funka...:
<div onmouseover="this.style.border = '1px solid black';" onmouseout="this.style.border = 'none';">Foobar</div>
Edit: Så går det när man inte kollar koden... Nu har jag rättat till felen! Tack gud för redigera-funktionen. :)
S silfver Medlem sedan apr. 2003 12 679 inlägg
nitro2k01 skrev:
Detta bör funka...:
<div onmouseover="this.style.border = '1px solid black';" onmouseout="this.style.border = 'none';">Foobar</div>
Edit: Så går det när man inte kollar koden... Nu har jag rättat till felen! Tack gud för redigera-funktionen. :)
Det där funkade prima. Så om jag nu endast vill ha border-top och border-bottom och med en annan bakgrundsfärg vid mouseonover. Kan du klura ut det också? :)
r/ Det här funkade inget vidare:
onmouseover="this.style.backgroundColor='000000'; this.style.border = '1px solid black';"
Hex-koder för färger ska alltid skrivas med # före.
Ska du ha samma stil på border-top och border-bottom funkar denna kod:
<div onmouseover="this.style.borderBottom = this.style.borderTop = '1px solid black'; this.style.background='#c090ff';" onmouseout="this.style.borderBottom = this.style.borderTop = 'none';this.style.background='transparent';">Foobar</div>
Detta kan du även lösa med enbart CSS. Om det nu är en länk i td:n, annars fungerar det enbart allt utom IE.