hover
Ik heb een klein probleempje met een hover functie die ik wil gebruiken op mijn site. Ik heb de code wat vermakkelijkt zodat jullie kunnen zien waar ik mee bezig ben. ik heb een zwart balkje. Wanneer ik over dit zwarte balkje hover moet er een nieuwe div te voorschijn komen. Dit lukt ook want je ziet dat er een blauwe div overheen ligt wnneer je er over hovert.
Mijn probleem is het volgende. Ik zou graag willen dat de knop zichtbaar blijft. dus dat de nieuwe blauwe div niet over de knop heen valt. is dit mogelijk en zo ja, hoe dan?
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<title>voorbeeld</title>
</head>
<body>
<style type="text/css">
#box{
height: 25px;
width: 50px;
position:absolute;
background: black;}
#hover {
width: 200px;
height: 100px;
visibility: hidden;
background: #06c;}
#box:hover #hover {
visibility: visible;}
</style>
<div id="box">
<div id="hover">
</div>
</div>
</body>
</html>
<html>
<head>
<title>voorbeeld</title>
</head>
<body>
<style type="text/css">
#box{
height: 25px;
width: 50px;
position:absolute;
background: black;}
#hover {
width: 200px;
height: 100px;
visibility: hidden;
background: #06c;}
#box:hover #hover {
visibility: visible;}
</style>
<div id="box">
<div id="hover">
</div>
</div>
</body>
</html>
Gewijzigd op 08/04/2011 15:04:06 door Koh do
Verder stonden er nog wat fouten in je code:
- HTML5 doctype kan je beter nog niet gebruiken
- Style tag hoort in de head te staan
De code wordt dus:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#hover
{
/* De overige stijl */
position: relative;
z-index: -1;
}
{
/* De overige stijl */
position: relative;
z-index: -1;
}
het volgende heb je nodig:
- onmouseover / onmouseup
- javascript this.classname
- 2 classes, 1 visible andere hidden
Google hierop en je komt een behoorlijk stuk verder.
@ Wouter, ik denk dat javascript makkelijker is, want hij wil het element laten staan.
Gewijzigd op 08/04/2011 15:48:34 door Milo S
Ik heb net z-index geprobeerd maar het verandert niet. misshien doe ik iets fout?
Ik probeer mijn hele site in css te doen want ik wil dit idee 50x op mijn website neer zetten waar door ik dus ook 50x een javasciript moet op halen.
Gewijzigd op 08/04/2011 19:40:31 door koh do
En je hoeft niet 50x javascript op te halen, gewoon 1 scriptje is al genoeg. Kijk maar naar dit voorbeeldje: http://waldio.webatu.com/js/hover.html
Dit effect zul je inderdaad niet kunnen creëren met allen CSS, alleen als er ook wat JS bij zit.
Code (php)
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>voorbeeld</title>
<style type="text/css">
#container{
position:relative;
height: 500px;
width: 500px;
background: purple;
z-index: -2;
float:left;
}
#box{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover {
position:relative;
width: 200px;
height: 100px;
visibility: hidden;
background: orange;
z-index: -1;}
#box:hover #hover {
visibility: visible;}
#box2{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;
z-index:1;}
#hover2 {
position:relative;
left: -58px;
width: 200px;
height: 100px;
visibility: hidden;
background: green;
z-index: -1;}
#box2:hover #hover2 {
visibility: visible;}
#box3{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;
z-index:1;}
#hover3 {
position:relative;
left: -116px;
width: 200px;
height: 100px;
visibility: hidden;
background: red;
z-index: -1;}
#box3:hover #hover3 {
visibility: visible;}
</style>
</head>
<body>
<div id="container">
<div id="box">
<div id="hover">
</div>
</div>
<div id="box2">
<div id="hover2">
</div>
</div>
<div id="box3">
<div id="hover3">
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>voorbeeld</title>
<style type="text/css">
#container{
position:relative;
height: 500px;
width: 500px;
background: purple;
z-index: -2;
float:left;
}
#box{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover {
position:relative;
width: 200px;
height: 100px;
visibility: hidden;
background: orange;
z-index: -1;}
#box:hover #hover {
visibility: visible;}
#box2{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;
z-index:1;}
#hover2 {
position:relative;
left: -58px;
width: 200px;
height: 100px;
visibility: hidden;
background: green;
z-index: -1;}
#box2:hover #hover2 {
visibility: visible;}
#box3{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;
z-index:1;}
#hover3 {
position:relative;
left: -116px;
width: 200px;
height: 100px;
visibility: hidden;
background: red;
z-index: -1;}
#box3:hover #hover3 {
visibility: visible;}
</style>
</head>
<body>
<div id="container">
<div id="box">
<div id="hover">
</div>
</div>
<div id="box2">
<div id="hover2">
</div>
</div>
<div id="box3">
<div id="hover3">
</div>
</div>
</div>
</body>
</html>
Ik ben op het moment het voorbeeld van je maar eens aan het bekijken.
Toevoeging op 09/04/2011 11:29:21:
Ik ben uiteraard gewoon door gegaan met testen en het is me toch gelukt met behulp van css. Voor de mensen die ooit nog eens naar deze topic searchen hier is de code
Code (php)
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<title>voorbeeld</title>
<style type="text/css">
#container{
position:relative;
height: 500px;
width: 500px;
background: purple;
z-index: -2;
float:left;
}
#box{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover {
position:relative;
width: 200px;
height: 100px;
visibility: hidden;
background: orange;
z-index: -1;}
#box:hover #hover {
visibility: visible;}
#box2{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover2 {
position:relative;
left: -58px;
width: 200px;
height: 100px;
visibility: hidden;
background: green;
z-index: -2;}
#box2:hover #hover2 {
visibility: visible;}
#box3{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover3 {
position:relative;
left: -116px;
width: 200px;
height: 100px;
visibility: hidden;
background: gray;
z-index: -2;}
#box3:hover #hover3 {
visibility: visible;}
</style>
</head>
<body>
<div id="container">
<div id="box">
<div id="hover">
</div>
</div>
<div id="box2">
<div id="hover2">
</div>
</div>
<div id="box3">
<div id="hover3">
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>voorbeeld</title>
<style type="text/css">
#container{
position:relative;
height: 500px;
width: 500px;
background: purple;
z-index: -2;
float:left;
}
#box{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover {
position:relative;
width: 200px;
height: 100px;
visibility: hidden;
background: orange;
z-index: -1;}
#box:hover #hover {
visibility: visible;}
#box2{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover2 {
position:relative;
left: -58px;
width: 200px;
height: 100px;
visibility: hidden;
background: green;
z-index: -2;}
#box2:hover #hover2 {
visibility: visible;}
#box3{
height: 25px;
width: 50px;
position: relative;
background: black;
float:left;
margin: 4px;}
#hover3 {
position:relative;
left: -116px;
width: 200px;
height: 100px;
visibility: hidden;
background: gray;
z-index: -2;}
#box3:hover #hover3 {
visibility: visible;}
</style>
</head>
<body>
<div id="container">
<div id="box">
<div id="hover">
</div>
</div>
<div id="box2">
<div id="hover2">
</div>
</div>
<div id="box3">
<div id="hover3">
</div>
</div>
</div>
</body>
</html>
Gewijzigd op 09/04/2011 09:18:40 door koh do