border på MouseOnOver

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

<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?

Flyttas från HTML-forumet.

<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å!

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?

<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>

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>

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. :)

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>

Trådarna sammanslagna.

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.