Toon posts:

[CSS]Background helemaal veranderen on hover.

Pagina: 1
Acties:

vrijdag 2 mei 2003 23:47

Acties:
  • GoddXX2
  • Registratie: Maart 2003
  • Laatst online: 07-03 11:14

GoddXX2

Topicstarter
Sorry voor de onduidelijke topictitel maar ik weet niet precies hoe ik het kan omschrijven. Ik wil graag dat de hele achtergrond van de layer van kleur veranderd als je over de link heen gaat, ik heb nu wel dat de kleur achter de text veranderd maar dat is niet echt wat ik wil.

Mijn Site

zo ziet me index er uit:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK href="Style.css" rel="stylesheet" type="text/css">
<title>Paul's Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<center>
  <div id="achtergrond" class="main"> 
    <div id="header" class="head"><a href="index.htm">Paul's Site</a></div>
    <div id="menuachtergrond" class="main"> 
      <!-- Het menu begint hier -->
      <div id="menuheader" class="head">Menu</div>
      <div id="menuhome" class="light"><a href="index.htm">Home</a></div>
      <div id="menuabout" class="dark"><a href="about.htm" target="_self">About Me</a></div>
      <div id="menudownload" class="light"><a href="download.htm" target="_self">Downloads</a></div>
      <div id="menufoto" class="dark"><a href="foto.htm" target="_self">Foto's</a></div>
      <div id="menulinks" class="light"><a href="links.htm" target="_self">Links</a></div>
      <div id="menuprojects" class="dark"><a href="projects.htm" target="_self">Projects</a></div>
      <div id="menuvb" class="light"><a href="vb.htm" target="_self">Visual Basic</a></div>
      <!-- einde menu -->
    </div>
    <div id="mainheader" class="head">Het Main Geval</div>
    <div id="mainmain" class="light" align="left"> 
      <ol>
        <br>
        &nbsp;<br>
        <div class="head1">Welkom</div>
      </ol>
    </div>
  </div>
</center>
</body>
</html>


en dit is me css file:

Cascading Stylesheet:
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

body {
    background-color: #ffffff;
    scrollbar-3dlight-color:;scrollbar-arrow-color:#C64747;
    scrollbar-base-color:#353535;
    scrollbar-track-color:#CDCDCD;
    scrollbar-darkshadow-color:#353535;
    scrollbar-face-color:#9A9A9A;
    scrollbar-highlight-color:353535;
    scrollbar-shadow-color:353535;
    font-family: Arial;
    font-size: 12px;    
    line-height: 18px;
    }
    
.dark {
    background-color: #CDCDCD;
    }
    
.head {
    background-color: #BCBCBC;
    font-weight:bold;
    }

.light {
    background-color: #E6E6E6;
    }
    
.main {
    background-color: #F6F6F6;
    }

.head1 {
    color: C64747;
    font-size: 20px;
    font-weight:bold;
    }
    
.head2 {
    color: C64747;  
    font-size: 16px;
    font-weight:bold;
    }
    
.head3 {
    font-size: 12px;
    font-weight:bold;
    }


a:link { 
    color: 353535; text-decoration: none;
    }
    
a:visited { 
    color: 262626; text-decoration: none;
    }
    
a:hover { 
    color: C64747; text-decoration: underline; background-color: #F6F6F6;
    }
    
a:active { 
    color: 353535; text-decoration: none;
    }
    

/*vanaf hier beginnen de layers dus dat heb ik maar weg gelaten, 
als het wel van belang is dan post ik het later nog wel even */

[ Voor 20% gewijzigd door GoddXX2 op 02-05-2003 23:47 ]

vrijdag 2 mei 2003 23:51

Acties:

Verwijderd

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

vrijdag 2 mei 2003 23:56

Acties:
  • GoddXX2
  • Registratie: Maart 2003
  • Laatst online: 07-03 11:14

GoddXX2

Topicstarter
uhm ik ken geen javascript, had ik er misschien even moeten bijzetten dus zou je het misschien in een voorbeeldje kunnen geven dat zou wel makkelijk zijn :)

vrijdag 2 mei 2003 23:56

Acties:

Verwijderd

Je kan ook a een display: block met een width van 100% meegeven, als je zoiets wilt bereiken als op mijn site.

zaterdag 3 mei 2003 00:08

Acties:

Verwijderd

dit was bijna een heel voorbeeld:
<div class="iets" onmouseover="this.style.backgroundColor=red;"><a href="poep">link</a></div>

dat zal wel werken gok ik. Die parent die ik er tussen had was een beetje onzin (laat) zou parentNode moeten zijn als je het event vanuit de a aanspreekt, maar da's nergens voor nodig omdat je event toch omhoog bubbled (als dit je niks zegt, nevermind, zie voorbeeld ;))

zaterdag 3 mei 2003 00:16

Acties:

Verwijderd

In Mozilla & klonen werkt dit overigens ook:

code:
1
2
3

div:hover{
blabla: geblaat;
}

zaterdag 3 mei 2003 00:21

Acties:
  • GoddXX2
  • Registratie: Maart 2003
  • Laatst online: 07-03 11:14

GoddXX2

Topicstarter
ik heb dat van mophor gebruikt maar wat voor commando is er voor zodat als ik me muis er weer vanaf haal dat hij weer terug veranderd ?

zaterdag 3 mei 2003 00:27

Acties:

Verwijderd

onmouseout :)

zaterdag 3 mei 2003 00:28

Acties:
  • GoddXX2
  • Registratie: Maart 2003
  • Laatst online: 07-03 11:14

GoddXX2

Topicstarter
owkeey thnx :)

zaterdag 3 mei 2003 11:45

Acties:

Verwijderd

Verwijderd schreef op 02 mei 2003 @ 23:56:
Je kan ook a een display: block met een width van 100% meegeven, als je zoiets wilt bereiken als op mijn site.
Luister naar Milkman_Dan, dit soort effecten hoeven echt niet meer met JavaScript gemaakt te worden...

Kijk voor de gein ook even naar het voorbeeld onderaan deze pagina.

[ Voor 16% gewijzigd door Verwijderd op 03-05-2003 11:47 ]

Pagina: 1
Reageer