hover class
De rede van mijn post is dat ik zit met een hover probleem. Het hover gedeelte werkt allemaal perfect, prcies zoals i in gedachte had. Maar nu komt het moeilijke gedeelte.
pic voor hover:
pic na hover:
Zo als je ziet wordt het rode gedeelte een keer zo groot als daarvoor. nou zou ik graag op het onderste "nieuwe" rode gedeelte ook een nieuwe teskt/afbeelding laten zien. maar hoe krijg ik dat voor elkaar.
Gewijzigd op 02/04/2011 17:05:41 door Peter paul
Gesponsorde koppelingen:
@peter paul, kijk eens naar de JavaScript functie innerHTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
var elems = document.getElementsByClassName('rood');
for(var i=0; i < elems.length; i++) {
if( elems[i].addEventListener ) {
elems[i].addEventListener('mouseover', vergroot, false);
elems[i].addEventListener('mouseout', verklein, false);
}
if( elems[i].attachEvent ) {
elems[i].attachEvent('onmouseover', vergroot);
elems[i].attachEvent('onmouseout', verklein);
}
}
function vergroot() {
this.style.height = '200px';
this.innerHTML = 'Veranderd!';
}
function verklein() {
this.style.height = '100px';
this.innerHTML = 'Weer terug veranderd';
}
</script>
var elems = document.getElementsByClassName('rood');
for(var i=0; i < elems.length; i++) {
if( elems[i].addEventListener ) {
elems[i].addEventListener('mouseover', vergroot, false);
elems[i].addEventListener('mouseout', verklein, false);
}
if( elems[i].attachEvent ) {
elems[i].attachEvent('onmouseover', vergroot);
elems[i].attachEvent('onmouseout', verklein);
}
}
function vergroot() {
this.style.height = '200px';
this.innerHTML = 'Veranderd!';
}
function verklein() {
this.style.height = '100px';
this.innerHTML = 'Weer terug veranderd';
}
</script>
Gewijzigd op 02/04/2011 18:01:02 door Wouter J
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="image-with-caption">
<img src="" />
<p class="caption">
</p>
</div>
<img src="" />
<p class="caption">
</p>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.image-with-caption {
position: relative; /* voor position:absolute van de .caption */
overflow: hidden;
}
.image-with-caption .caption {
display: block;
position: absolute;
bottom: -75px;
height: 100px;
transition: bottom 0.25s ease-in-out;
-webkit-transition: bottom 0.25s ease-in-out;
-moz-transition: bottom 0.25s ease-in-out;
-o-transition: bottom 0.25s ease-in-out;
}
.image-with-caption:hover .caption {
bottom: 0px;
}
position: relative; /* voor position:absolute van de .caption */
overflow: hidden;
}
.image-with-caption .caption {
display: block;
position: absolute;
bottom: -75px;
height: 100px;
transition: bottom 0.25s ease-in-out;
-webkit-transition: bottom 0.25s ease-in-out;
-moz-transition: bottom 0.25s ease-in-out;
-o-transition: bottom 0.25s ease-in-out;
}
.image-with-caption:hover .caption {
bottom: 0px;
}
