Virusscanner tips?
probleem met hovers
Ik zit met een hover probleem. Ik probeer, dat als je met je muis over één van de 2 vakjes gaat,
dat er dan een div zichtbaar word, "infobox". Ik heb al via google gezocht, en wat dingen uit geprobeerd,
maar het lukt niet zoals ik het graag zou willen.
Mijn 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<title></title>
<style>
body{
background-image: url('bg.png');
}
h1{
color: #32A8ED;
text-align:Center;
text-shadow: 1px 1px 1px black;
text-shadow:0 0 .2em #000000, 3px 3px 1em #32A8ED;
}
.layer{
background-image: url('shade.png');
padding:5px;
margin:20px auto;
width:800px;
color:White;
}
a{
font-size:16pt;
color: #E6E6E6;
float:left;
padding:5px;
text-align:Center;
background-color: black;
margin:5px;
width:100px;
height:80px;
line-height:80px;
font-family:Arial,Helvetica,sans-serif;
cursor:pointer
}
a:HOVER{
font-size:16pt;
color: #FFFFFF;
background-color: #32A8ED;
font-weight:Bold;
}
.posfixer{
width:250px;
margin:20px auto;
}
.posfixer p{
text-align:Center;
font-family:Arial,Helvetica,sans-serif;
}
.infobox{
background-color:black;
height:200px;
border:1px solid black;
padding:4px;
}
.test {
display: none;
}
a:hover + .test {
display: block;
color:red;
}
</style>
<script>
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("click.ogg", "click.mp3")
var clicksound=createsoundbite("click.ogg", "click.mp3")
</script>
</head>
<body>
<div class="layer">
<h1>NAAM</h1>
<div class="posfixer">
<p>Kies een optie:</p>
<a href="" onmouseover="mouseoversound.playclip()">vak 1</a>
<a href="" onmouseover="mouseoversound.playclip()">vak 2</a>
<div style="clear:both;"></div>
</div>
<div class="infobox">
hier komt binnenkort informatie
</div>
</div>
</body>
<head>
<title></title>
<style>
body{
background-image: url('bg.png');
}
h1{
color: #32A8ED;
text-align:Center;
text-shadow: 1px 1px 1px black;
text-shadow:0 0 .2em #000000, 3px 3px 1em #32A8ED;
}
.layer{
background-image: url('shade.png');
padding:5px;
margin:20px auto;
width:800px;
color:White;
}
a{
font-size:16pt;
color: #E6E6E6;
float:left;
padding:5px;
text-align:Center;
background-color: black;
margin:5px;
width:100px;
height:80px;
line-height:80px;
font-family:Arial,Helvetica,sans-serif;
cursor:pointer
}
a:HOVER{
font-size:16pt;
color: #FFFFFF;
background-color: #32A8ED;
font-weight:Bold;
}
.posfixer{
width:250px;
margin:20px auto;
}
.posfixer p{
text-align:Center;
font-family:Arial,Helvetica,sans-serif;
}
.infobox{
background-color:black;
height:200px;
border:1px solid black;
padding:4px;
}
.test {
display: none;
}
a:hover + .test {
display: block;
color:red;
}
</style>
<script>
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("click.ogg", "click.mp3")
var clicksound=createsoundbite("click.ogg", "click.mp3")
</script>
</head>
<body>
<div class="layer">
<h1>NAAM</h1>
<div class="posfixer">
<p>Kies een optie:</p>
<a href="" onmouseover="mouseoversound.playclip()">vak 1</a>
<a href="" onmouseover="mouseoversound.playclip()">vak 2</a>
<div style="clear:both;"></div>
</div>
<div class="infobox">
hier komt binnenkort informatie
</div>
</div>
</body>
Ik heb dit geprobeerd http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css, maar als ik het wou doen, zoals ik graag wou, werkte het niet meer.
(het werkte alleen als ik de div gelijk achter of onder de "< a> </ a>" had.
Met vriendelijke groet,
Marco
Gewijzigd op 29/03/2014 20:41:11 door Marco Eilander
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = function()
{
var ib = document.getElementById('infobox');
var vakken = document.getElementsByClassName('vak');
for(var i = 0 ; i < vakken.length ; i++)
{
vakken[i].onmouseover = function() {
ib.style.display = 'block';
};
vakken[i].onmouseout = function() {
ib.style.display = 'none';
};
}
};
{
var ib = document.getElementById('infobox');
var vakken = document.getElementsByClassName('vak');
for(var i = 0 ; i < vakken.length ; i++)
{
vakken[i].onmouseover = function() {
ib.style.display = 'block';
};
vakken[i].onmouseout = function() {
ib.style.display = 'none';
};
}
};
Omdat we maar één infobox hebben geven we die een uniek id:
Code (php)
1
2
3
2
3
<div id="infobox">
hier komt binnenkort informatie
</div>
hier komt binnenkort informatie
</div>
De vakken geven we dezelfde class waarmee we ze in js kunnen onderscheiden van andere <a> elementen:
Code (php)
1
2
2
<a class="vak" href="">vak 1</a>
<a class="vak" href="">vak 2</a>
<a class="vak" href="">vak 2</a>
zet in je css het infovak standaard op display none zodat deze in eerste instantie verborgen blijft:
Code (php)
1
2
3
4
2
3
4
#infobox{
...
display: none;
}
...
display: none;
}