Toon posts:

[CSS] hele rij oplichten door MouseOver functie

Pagina: 1
Acties:

maandag 26 september 2005 21:38

Acties:

Verwijderd

Topicstarter
Tweakers,

K ben bezig met het opzetten van een hele overzichtelijk en duidelijke tabel, die binnen een site moet komen.

Hier kunt u het princiepe bekijken: http://www.elissen-vof.nl/Tweakers/index.html
(Wanneer u met de muis over de cellen gaat, wordt bijna de hele rij blauw...)

Nou wil ik de hele rij blauw hebben, wanneer iemand met de muis over de rij-en beweegt. En voor de duidelijkheid wil ik toch de "left headers" de (donker blauwe) achtergrondkleur laten behouden wanneer er NIET met de muis overheen wordt bewogen..

Kortom: hoe geef ik de "Left borders" de mouseOver background mee?

Ik ben behoorlijk bekend met CSS, maar toch lukt het niet dus a.u.b. geen css-voor-dummie-links!

Ik dacht zelf dat dit met de z-index te maken had, maar helaas.


INDEX.HTML code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<link rel="stylesheet" href="test.css" type="text/css"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test1</title>
</head>

<body>
<table border="0">
 <tr> 
   <td>  
    </td>
    <td width="200" class="headborder" align="center"> Top header 1 </td>
    <td width="200" class="headborder" align="center"> Top header 2 </td>
    <td width="300" class="headborder" align="center"> Top header 3 </td>
    <td width="200" class="headborder" align="center"> Top header 4 </td>
    <td width="200" class="headborder" align="center"> Top header 5 </td>
    <td width="200" class="headborder" align="center"> Top header 6 </td>
  </tr>
  <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
    <td align="center" class="leftborder" width="300">Left header 1</td>
    <td class="border" align="center">1</td>
    <td class="border" align="center">2</td>
    <td class="border" align="center">3</td>
    <td class="border" align="center">4</td>
    <td class="border" align="center">5</td>
    <td class="border" align="center">6</td>
      </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
    <td align="center" class="leftborder" width="300">Left header 2</td>
    <td class="border" align="center">1</td>
    <td class="border" align="center">2</td>
    <td class="border" align="center">3</td>
    <td class="border" align="center">4</td>
    <td class="border" align="center">5</td>
    <td class="border" align="center">6</td>
      </tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
    <td align="center" class="leftborder" width="300">Left header 3</td>
    <td class="border" align="center">1</td>
    <td class="border" align="center">2</td>
    <td class="border" align="center">3</td>
    <td class="border" align="center">4</td>
    <td class="border" align="center">5</td>
    <td class="border" align="center">6</td>
      </tr>
      </table>
     </body>


TEST.CSS code:
Cascading Stylesheet:
1
2
3
4
5
6
7
8

body{ font-family:Verdana, Arial, Helvetica, sans-serif ; color:#000000}

.headborder{background-color:#33FF66 ; border-color:#000000 ; border-width:thin}
.leftborder{background-color:#0066CC ; border-color:#000000 ; border-width:thin}
.border{ background-color:transparent ; border-color:#FFFFFF ; border-width:thin}

.normal{background-color:transparent ; /* background-image:url(alg_img/prov_bg.jpg) ; background-repeat:no-repeat ; background-position:top left*/ }
.highlight{background-color: #C7E4FD ;  /*background-image:url(alg_img/prov_bg.jpg) ; background-repeat:no-repeat ; background-position:top left ; background-attachment:fixed*/ }



Het doet mij deugt wanneer iemand de oplossing vindt.... _/-\o_

Alvast bedankt. :)

André: Graag in het vervolg je code tussen [code] blokken plaatsen ;)

[ Voor 25% gewijzigd door André op 26-09-2005 22:23 ]

maandag 26 september 2005 22:34

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 28-04 11:43

André

Analytics dude

Voor Firefox kan het veel simpeler zonder al die onmouseovers en onmouseouts:

Cascading Stylesheet:
1

tr:hover td { background-color: #C7E4FD; }

Maar om alles op te lossen, maak van:
Cascading Stylesheet:
1

.highlight { background-color: #C7E4FD; }

dit:
Cascading Stylesheet:
1

.highlight td {background-color: #C7E4FD; }

[ Voor 41% gewijzigd door André op 26-09-2005 22:40 ]

maandag 26 september 2005 22:44

Acties:
  • beetle71
  • Registratie: Februari 2003
  • Laatst online: 21-04 12:56

beetle71

En voor IE even je CSS aanpassen:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

body{ font-family:Verdana, Arial, Helvetica, sans-serif ; color:#000000} 

.headborder{background-color:#33FF66 ; border-color:#000000 ; border-width:thin} 
.leftborder{background-color:#0066CC ; border-color:#000000 ; border-width:thin} 
.border{ border-color:#FFFFFF ; border-width:thin} 

.normal{ } 
.highlight{
    background-color: #C7E4FD ;
}

normal .leftborder{
   background-color: #0066CC;
}
.highlight .leftborder{
   background-color: #C7E4FD;
}


Let vooral op de laatste twee definities!

offtopic:
Norbik?!

maandag 26 september 2005 23:38

Acties:

Verwijderd

Topicstarter
Ja, die TD ervoor werkt! (was k nou ff helemaal niet opgekomen... 8)7 )

Goh, echt super mannen... Jullie hebben mij ECHT geweldig geholpen.

HEEEEEL erg bedankt. _/-\o_ _/-\o_ _/-\o_

Groeten,
Jack :)
Reageer