Hallo!
Ik maak in een slider hotspots, waar je op kan klikken zodat er een popupje komt met informatie over het product waar de hotspot op staat. Nu heb ik alleen een probleem met de z-index, die lijkt niet te werken.
Afbeelding niet beschikbaarDe bron kon niet worden geladen (i.imgur.com).Bron openen ↗Uitleg bij de screen:
De rondjes zijn de hotspots, en dat vakje waar cameradingen in staat is de popup.
Er is in dit geval op de onderste hotspot geklikt.
Het probleem is, zoals je ziet, dat de hotspot over de popup heen gaat. De hotspot is namelijk gewoon klikbaar etc. Gek genoeg is dit andersom niet het geval:
Afbeelding niet beschikbaarDe bron kon niet worden geladen (i.imgur.com).Bron openen ↗De popupjes worden door javascript op hun plek gezet, dus let niet op de top: x; left: x; etc. in de codes.
Kan iemand mij helpen waarom de hotspot over de popup heen gaat? Ik heb volgens mij de z-index goed gezet. Ik hoop dat ik alle relevante codes heb gegeven.
Thom.
Ik maak in een slider hotspots, waar je op kan klikken zodat er een popupje komt met informatie over het product waar de hotspot op staat. Nu heb ik alleen een probleem met de z-index, die lijkt niet te werken.
(CSS)
.slider-hotspot {
position: absolute;
z-index: 3;
width: 0;
height: 0;
}
.slider-hotspot .hotspot-button {
width: 35px;
height: 35px;
background: url(../images/hotspotmv.png) no-repeat;
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
z-index: 4;
}
.slider-hotspot .hotspot-popup {
position: relative;
width: 250px;
background: rgb(30, 30, 30);
background: rgba(30, 30, 30, 0.69);
border: 5px solid rgb(168, 168, 168);
border: 5px solid rgba(168, 168, 168, 0.33);
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 15px;
display: none;
font-size: 20px;
color: white;
text-align: center;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding-bottom: 30px;
z-index: 5;
}(HTML)
<div class="slider-hotspot" style="left: 1000px; top: 200px;">
<div class="hotspot-button"></div>
<div class="hotspot-popup" style="top: 45px; bottom: auto; left: -127.5px; right: auto; display: none;">
Fotolijst
<div class="description">Met bloemen</div>
<div class="hotspot-close">Sluit</div>
<div class="hotspot-pp" onclick="location.href=http://www.hoi.nl">
<a href="http://www.hoi.nl">Bekijk product</a>
</div>
</div>
</div>
<div class="slider-hotspot" style="left: 1100px; top: 320px;">
<div class="hotspot-button"></div>
<div class="hotspot-popup" style="top: auto; bottom: 111px; left: auto; right: 220px;">
Cameradingen
<div class="description">Voor bij een camera</div>
<div class="hotspot-close">Sluit</div>
<div class="hotspot-pp" onclick="location.href=http://www.hoi.nl">
<a href="http://www.hoi.nl">Bekijk product</a>
</div>
</div>
</div>(Screen)
Afbeelding niet beschikbaarDe bron kon niet worden geladen (i.imgur.com).Bron openen ↗De rondjes zijn de hotspots, en dat vakje waar cameradingen in staat is de popup.
Er is in dit geval op de onderste hotspot geklikt.
Het probleem is, zoals je ziet, dat de hotspot over de popup heen gaat. De hotspot is namelijk gewoon klikbaar etc. Gek genoeg is dit andersom niet het geval:
(Screen)
Afbeelding niet beschikbaarDe bron kon niet worden geladen (i.imgur.com).Bron openen ↗Kan iemand mij helpen waarom de hotspot over de popup heen gaat? Ik heb volgens mij de z-index goed gezet. Ik hoop dat ik alle relevante codes heb gegeven.
Thom.
