Byt färg på cell vid MouseOver!?

HTML & CSS

18 svar · 559 visningar · startad av MoneyOpps.nu 25 dec. 2002

MoneyOpps.nuMedlem sedan maj 2002106 inlägg

Frågan25 dec. 2002 22:02#1

Hur gör man för att byta bakgrundsfärg på en cell i en tabell, när man för musen över den ?

Har sett det på några sidor, men aldrig kollat hur man gör ...

Tack på förhand.

mikkeXMedlem sedan aug. 2002477 inlägg

25 dec. 2002 22:58#2

Var du gör är att du tilldelar a-taggen block egenskaper, vilket gör att taggen täcker hela cellen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#lankar
{
width: 300px;
background: red;
color: black;
}
#lankar a
{
display: block;
width: 100%;
color: black;
}
#lankar a:hover
{
background: white;
color: black;
}
</style>
</head>

<body>
<table id="lankar">
  <tr> 
    <td><a href="#">ett</a></td>
    <td><a href="#">tv&aring;</a></td>
    <td><a href="#">tre</a></td>
  </tr>
</table>
</body>
</html>

DarrenMedlem sedan dec. 2002789 inlägg

25 dec. 2002 23:57#3

eller så kan du skriva så här:

...
   <td onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='';">din text</td>
...

MoneyOpps.nuMedlem sedan maj 2002106 inlägg

26 dec. 2002 00:17#4

Tack Darren.
Funkade fint !

DarrenMedlem sedan dec. 2002789 inlägg

26 dec. 2002 00:24#5

Anytime... :)

P.S. Fakturan kommer med posten... :birp

mikkeXMedlem sedan aug. 2002477 inlägg

26 dec. 2002 07:03#6

Inte för att jag vill vara sådan... men om det var javascript du ville ha, så varför postade du inte i javascript forumet?

BäckmanMedlem sedan nov. 2001274 inlägg

26 dec. 2002 14:02#7

Han kanske helt enkelt inte visste att det var så mycket enklare att åstadkomma med hjälp av Javascript? :)

frankofMedlem sedan jan. 20016 874 inlägg

26 dec. 2002 14:14#8

MikkeX>Om man skall vara petnoga ;) din lösning ändrar inte färg på cellen :p

mikkeXMedlem sedan aug. 2002477 inlägg

26 dec. 2002 15:31#9

Bäckman skrev:

Han kanske helt enkelt inte visste att det var så mycket enklare att åstadkomma med hjälp av Javascript? :)

Enklare att infoga javascript kod vid varje länk än att definera det i stylesheets, och slippa lägga in massa extra kod, det tycker inte jag... men det är väl en smakfråga.

frankof skrev:

MikkeX>Om man skall vara petnoga din lösning ändrar inte färg på cellen

Vilket sätt ändrar den inte färgen? a blir en block-tagg som tar upp utrymmet i cellen som motsvarar bakgrunden.

DarrenMedlem sedan dec. 2002789 inlägg

26 dec. 2002 16:18#10

mikkeX, din kod fungerar... Om du har en länk i tabellcellen. Men om du inte har det så kommer det inte att fungera och då skall du använda koden jag skrev.

Och frankof hade rätt. Din kod ändrar inte bakgrundsfärgen på tabellcellen utan på länken.

Ett litet missförstånd verkar det som :birp.

mikkeXMedlem sedan aug. 2002477 inlägg

26 dec. 2002 17:00#11

Darren skrev:

mikkeX, din kod fungerar... Om du har en länk i tabellcellen. Men om du inte har det så kommer det inte att fungera och då skall du använda koden jag skrev.

Och frankof hade rätt. Din kod ändrar inte bakgrundsfärgen på tabellcellen utan på länken.

Ett litet missförstånd verkar det som :birp.

Inget missförstånd här inte - min poäng var att frågan postades i xhtml/css-forumet och jag svarade med en xhtml/css lösning, koden som jag lämnade ändrar länkfärgen - ja, men eftersom länken täcker hela cellen ändras bakgrundsfärgen. Dessutom - om JavaScript inte är akriverat i webbläsaren fungerar det inte med en JavaScript-lösning.

Jag säger inte vad som är rätt eller fel - jag svarade bara på frågan, och vad är det för fel med det?

DarrenMedlem sedan dec. 2002789 inlägg

26 dec. 2002 17:58#12

mikkeX skrev:

Inget missförstånd här inte - min poäng var att frågan postades i xhtml/css-forumet och jag svarade med en xhtml/css lösning, koden som jag lämnade ändrar länkfärgen - ja, men eftersom länken täcker hela cellen ändras bakgrundsfärgen. Dessutom - om JavaScript inte är akriverat i webbläsaren fungerar det inte med en JavaScript-lösning.

Jag säger inte vad som är rätt eller fel - jag svarade bara på frågan, och vad är det för fel med det?

Vi lägger ner detta nu tycker jag. Han/Hon har fått svar och är nöjd så jag tycker att det är meningslöst att vi håller på och tjafsar om vem som har rätt eller fel... Båda lösningar fungerar beroende vad man skall använda de till.

frankofMedlem sedan jan. 20016 874 inlägg

26 dec. 2002 18:01#13

lugna ner dig grabben ;)

Jag säger inte vad som är rätt eller fel - jag svarade bara på frågan, och vad är det för fel med det?

Nä, det gör du inte, om det skall vara petnoga, du svarade på hur man får en "a-tag" till att fylla en hel cell ( <td></td> ).
Byta bakgrundsfärgpå en cell gör man enklast med javascript.
Teoretiskt skulle det fungera med css också men det gör det inte(hover skulle kunna användas på alla element men fungerar bara på "a")

mikkeXMedlem sedan aug. 2002477 inlägg

26 dec. 2002 19:15#14

frankof skrev:

lugna ner dig grabben ;)

Jag är lugn, och jag vill helst inte bli kallad grabben, jag har passerat 30 strecket ... :-)

Du kan mycket väl använda hover på td - men det fungerar endast i NS 7 (och Mozilla).

td:hover
{
background: red;
}

Som sagt, min poäng var att frågan ställdes i xhtml/css forumet, men det verkar inte en kotte bry sig om. Så jag ska inte tjata.

dectgapMedlem sedan sep. 20021 655 inlägg

26 dec. 2002 19:56#15

onmouseover="this.style.backgroundColor='red';"

Ursäkta, men det där är inte alls javascript. "onmouseover" är ju ett html-attribut, och resten är DOM.

Hur som helst tycker jag att din lösning, mikkeX, var väldigt snygg :)

jarvkloMedlem sedan juli 20013 378 inlägg

26 dec. 2002 20:28#16

Hmm... §jr

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

Skall vi vara riktigt noga så är alltså

this.style.backgroundColor='red';

en tilldelningssats i Javascript i just detta fall...

Tilldelningen av (sträng)värdet 'red' görs via interfacet i DOM till ett attribut som hör till ett visst (för-)definierat objekt som motsvarar den aktuella taggens innehåll m.m.

Javascriptkoden binds i exemplet till objektets interna händelsehantering genom att den lagts som strängvärde till (x)html-attributet onmouseover...

Man hade lika gärna kunnat binda scriptet till den taggen genom en tilldelning direkt i en Javascriptsats (men det är en annan historia :e ) - och som MikkeX påpekade är den historien antagligen bättre lämpad i ett annat forum

Källor:
http://www.w3.org/DOM/#what
och
http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3

MikkeX:s metod funkar oavsett om man har Javascript på eller av i sin webbläsare när man besöker sidan, onmouseover-varianten gör det inte...

PEACE :birp

frankofMedlem sedan jan. 20016 874 inlägg

27 dec. 2002 17:40#17

Jag är lugn, och jag vill helst inte bli kallad grabben, jag har passerat 30 strecket ... :-)

Som sagt, grabben ;) :e
Jag tyckte försåvit att din lösning var snygg, och den passde rätt bra i detta forument, jag reagerade lite på din "sura" kommentar ang. att lösa det med javascript.
Det är inte alla som har skillnaderna så klart för sig som du har.

mikkeXMedlem sedan aug. 2002477 inlägg

28 dec. 2002 00:50#18

frankof skrev:

[...]jag reagerade lite på din "sura" kommentar ang. att lösa det med javascript[...]

Hm, var hittar du den sura kommentaren?

frankofMedlem sedan jan. 20016 874 inlägg

28 dec. 2002 13:28#19

Inte för att jag vill vara sådan... men om det var javascript du ville ha, så varför postade du inte i javascript forumet?

Denna menade jag, kanske inte var menat "surt", men vedkommande kanske inte visste om att det var javascriptlösningar han/hon hade sett på nätet(vilket är rätt troligt).