Notifikationer

Markér alle som læst Log ud

eikhorsholm Nybegynder

01. juni 2005 - 21:59 Der er 16 kommentarer og
1 løsning

Hover på celler med CSS.

Er det muligt, at ændre baggrundsfarven med hover på celler i en tabel i css?

Mener vist, at det ikke fungerer i IE, men derimod i andre browsere. Er det muligt, at lave en løsning som evt. referere til en .htc-fil eller hvad de hedder så det fungerer i alle browsere?

Synes godt om

skovenborg Nybegynder

01. juni 2005 - 22:09 #1

Det er rigtigt at IE kun tillader :hover på links. Du kan derimod få det til at virke i de fleste browsere via java script:
<script type="text/javascript">
function changeColors(elm,fgColor,bgColor) {
elm.style.color = fgColor;
elm.style.backgroundColor = bgColor;
}
</script>
<style type="text/css">
td {
background-color:#000;
color:#fff;
}
</style>

<table>
<tr><td onmouseover="changeColors(this,'#000','#fff');" onmouseout="changeColors(this,'','');">Celle 1</td><td onmouseover="changeColors(this,'#000','#fff');" onmouseout="changeColors(this,'','');">Celle 2</td></tr>
<tr><td onmouseover="changeColors(this,'#000','#fff');" onmouseout="changeColors(this,'','');">Celle 3</td><td onmouseover="changeColors(this,'#000','#fff');" onmouseout="changeColors(this,'','');">Celle 4</td></tr>
<tr><td onmouseover="changeColors(this,'#000','#fff');" onmouseout="changeColors(this,'','');">Celle 5</td><td onmouseover="changeColors(this,'#000','#fff');" onmouseout="changeColors(this,'','');">Celle 6</td></tr>
</table>

Synes godt om

eikhorsholm Nybegynder

01. juni 2005 - 22:12 #2

Det er mest for at få det til at virke med css, så jeg kan samle det i mit stylesheet.
For det virker vel også uden JS med f.eks.:

onmouseover="this.style.backgroundColor='#FFFFFF'" osv.

Synes godt om

olebole Juniormester

01. juni 2005 - 22:21 #3

<ole>

Nej, som skovenborg skriver, er det ikke muligt at lave hover på andet end links i IE - hvis det skal gøres med CSS.

Det kan kun gøres med JavaScript ... f.eks. det, du selv skriver:
onmouseover="this.style.backgroundColor='#FFFFFF'"

/mvh
</bole>

Synes godt om

eikhorsholm Nybegynder

01. juni 2005 - 22:38 #4

Hmm. Ok, troede man kunne lave et hack med .htc-filer eller noget, så man kunne angive det i stylesheetet, som så refererede til .htc-filen.

Synes godt om

eikhorsholm Nybegynder

01. juni 2005 - 22:52 #5

Burde dette ikke virke i Firefox?:

mit stylesheet:

.bar:hover {
background-color: #FFFFFF;
}

<table>
<tr>
<td class="bar">test</td>
</tr>
</table>

Synes godt om

skovenborg Nybegynder

01. juni 2005 - 23:43 #6

jo, men var pointen ikke, at det skulle virke i (næsten) alle browsere? Du kan selvfølgelig lave en kombineret løsning hvor du både bruge javascript-løsningen og din css-løsning. Så får du også dem med som har slået Javascript fra (og som understøtter :hover på celler).

Synes godt om

olebole Juniormester

02. juni 2005 - 00:20 #7

Hvad skulle man bruge et HTC-'hack' til? Det skal vel gerne virke i flere browsere? Og det vil stadig være JS ... ikke CSS :)

Synes godt om

eikhorsholm Nybegynder

02. juni 2005 - 08:37 #8

--> Grunden til jeg ikke vil bruge JavaScript er, at jeg skal have samlet alle mine cellers egenskaber i et stylesheet el. lign.

Synes godt om

notes2c Nybegynder

02. juni 2005 - 09:46 #9

Det du ønsker kan godt lade sig gøre, for dean edwards har lavet en CSS 2 implimentering v.h.a javascript via htc filer til ie. Det vil betyde at du kan have et single style sheet for så fungere på alle browsere som understøtter CSS 2 standarderne.

Her kan du se hvorlangt han er kommet (og det er langt): http://dean.edwards.name/IE7/

Hvorvidt om du så vil gå så langt er jo op til dig...

Synes godt om

eikhorsholm Nybegynder

02. juni 2005 - 17:27 #10

notes2c -> Det er sådan noget jeg leder efter. Men bare slet ikke så omfattende, det skal kun inkl. hover-funktionen i css. Er det muligt?

Synes godt om

eikhorsholm Nybegynder

02. juni 2005 - 17:32 #11

Hej, fandt denne:
http://www.xs4all.nl/~peterned/csshover.html

Synes godt om

eikhorsholm Nybegynder

02. juni 2005 - 17:33 #12

Tak for alle svar!

Synes godt om

eikhorsholm Nybegynder

02. juni 2005 - 17:34 #13

Nu virker det i IE, men ikke i Firefox. Nedenstående eksempel:

.bar:hover {
background-color: #FFFFFF;
}

<table>
<tr>
<td class="bar">test</td>
</tr>
</table>

Har heller aldrig fungeret i Firefox. Nogen der kan sige hvorfor? Det burde vel virke?

Synes godt om

skovenborg Nybegynder

02. juni 2005 - 17:44 #14

Er du sikker? Det virker fint for mig, og der ser da heller ikke ud til at være nogle problemmer som Mozilla skulle kunne løbe ind i. Det skulle da lige være at man ikke kunne se det fordi du ændrer bagrunden til hvid - og at der fx også er hvid bagved.

Synes godt om

eikhorsholm Nybegynder

02. juni 2005 - 20:13 #15

Det her virker ikke i Firefox, Netscape eller Opera.

<html>

<head>
<title>bar</title>
<style type="text/css">

</style>
</head>

<body>

<table>
<tr>
<td class="bar">test</td>
</tr>
</table>
</body>

</html>

Synes godt om

skovenborg Nybegynder

02. juni 2005 - 22:49 #16

Hmm, meget sjov opdagelse. Det virker åbenbart kun hvis du har husket doctypen - hvilket du jo i forvejen skal, så det er jo intet problem.

Prøv at tilføje:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
helt i toppen, så skulle det virke.

Synes godt om

olebole Juniormester

03. juni 2005 - 01:35 #17

<ole>

- og så bør man nok udelade HTML-kommentar-tags i style-tag'et :)

/mvh
</bole>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS