/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Skift baggrundsfarve ved mouse over...
Fra : Magnus


Dato : 04-12-05 11:34

Hvordan kan jeg i css lave det sådan at baggrundsfarven skifter på den celle
i nedenstående tabel når musen er over?



#punkt {
padding-left: 4px;
padding-right: 4px;
border-right: #506d98 1px solid;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-bottom: #506d98 1px solid;
background-color: #003366;
font-size: 10px;
height: 17px;
color: #ffcc00
}


<table border="0" cellspacing="0" cellpadding="0">
<tr><td id="punkt"><a href='#'>Privat</a></td></tr>
<tr><td id="punkt"><a href='#'>Uddannelse</a></td></tr>
<tr><td id="punkt"><a href='#'>Andet</a></td></tr>
</table>


/Magnus



 
 
Jørgen Farum Jensen (04-12-2005)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-12-05 12:53

Magnus wrote:
> Hvordan kan jeg i css lave det sådan at baggrundsfarven skifter på den celle
> i nedenstående tabel når musen er over?
>
>
>
> #punkt {
> padding-left: 4px;
> padding-right: 4px;
> border-right: #506d98 1px solid;
> border-top: #000000 1px solid;
> border-left: #000000 1px solid;
> border-bottom: #506d98 1px solid;
> background-color: #003366;
> font-size: 10px;
> height: 17px;
> color: #ffcc00
> }
>
>
> <table border="0" cellspacing="0" cellpadding="0">
> <tr><td id="punkt"><a href='#'>Privat</a></td></tr>
> <tr><td id="punkt"><a href='#'>Uddannelse</a></td></tr>
> <tr><td id="punkt"><a href='#'>Andet</a></td></tr>
> </table>
>
>
> /Magnus
>

Du kan ikke have flere id'er på samme side, brug
class i stedet for:
a.punkt { ... }

og

<td><a href="#" class="punkt">...</a></td>

Derved formaterer du a-markøren i steet for
tabelcellen, og det er jo det, du i virkeligheden
vil.

Tilføj til
..punkt {
....
background:transparent;}

og lav en ny formregel:

td a:hover {
background-color:[Den farve du vil ha' ved mouseover]
}

Det sku' klare det.
--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk


Erik Ginnerskov (05-12-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 05-12-05 00:07

Jørgen Farum Jensen wrote:


> <td><a href="#" class="punkt">...</a></td>
>
> Derved formaterer du a-markøren i steet for
> tabelcellen, og det er jo det, du i virkeligheden
> vil.

Og så skal man huske at sætte a.punkt til blokvisning:

#punkt {
padding-left: 4px;
padding-right: 4px;
border-right: #506d98 1px solid;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
border-bottom: #506d98 1px solid;
background-color: #003366;
font-size: 10px;
height: 17px;
color: #ffcc00;
display:block; /* tilføjet definition */
}

Ellers vil det ikke være hele tabelcellen, der skifter farve.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/



Jørgen Farum Jensen (05-12-2005)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 05-12-05 12:17

Erik Ginnerskov wrote:

> Og så skal man huske at sætte a.punkt til blokvisning:
>
> #punkt {
> padding-left: 4px;
> padding-right: 4px;
> border-right: #506d98 1px solid;
> border-top: #000000 1px solid;
> border-left: #000000 1px solid;
> border-bottom: #506d98 1px solid;
> background-color: #003366;
> font-size: 10px;
> height: 17px;
> color: #ffcc00;
> display:block; /* tilføjet definition */
> }
>
> Ellers vil det ikke være hele tabelcellen, der skifter farve.
>

Du har fuldstædnig ret, det glemte jeg
lige i skyndingen.

Og du glemte vist at det er en /class/, der
skal formateres:

..punkt {
....
}
--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk


Erik Ginnerskov (05-12-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 05-12-05 22:04

Jørgen Farum Jensen wrote:

> Og du glemte vist at det er en /class/, der
> skal formateres:
>
> .punkt {

ja, jeg så det først, da det var sendt. ;)

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste