Pokaži/skrij div na mouseover
3 naročniki
3 naročniki
Torej spravljam se delati nekaj podobnega na eni spletni strani kot ma conversations.nokia.com ta levi fiksni sidebar...
Vendar imam probleme pri div-ih, ko se prikažejo na mouseover... Trenutno uporabljam spodnjo kodo:
<div id="sidebar">
<div class="sidebar">
<table width="100" border="0">
<tr>
<td><a href="javascript:;" onMouseOut="document.getElementById('sb').style.display = 'none'" onMouseOver="document.getElementById('sb').style.display = 'block'"> Toggle Div Visibility</a></td>
</tr>
</table>
</div>
</div>
<div id="sb" >This is test<br>And anohero ne...<br>
</div>
Ampak so problemi da div ne ostane dovolj časa odprt itd... Ima kdo kakšen dober tutorial glede tega?
Na tem divu ki se odpre bi naj bili še linki, tako da mora ostati dlje odprt...
Prosim
4 odgovori
Ok, sem si malo bolje pogledal kaj zelis in mislim da lahko vse storis ze v CSS-u (razen ce oces imeti napredne vizualne efekte).
Torej nekako takole:
<html>
<head>
<style>
#sidebar {position: absolute; top: 150; left: 0; width: 50px; border:1px solid grey}
#sidebar li{list-style: none;}
#sidebar>ul {padding: 0px; margin: 0px;}
#sidebar>ul>li{padding: 0px; margin: 0px;}
#sidebar>ul>li>span{border:1px solid grey; width: 50px; height: 50px; display: block;}
#sidebar>ul>li>div{display: none; background: grey; margin-left: 50px; margin-top: -50px; width: 200px; position: absolute}
#sidebar>ul>li:hover>div{display:block;}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li> <span> 1 </span>
<div>
Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let saj je
to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja
</div>
</li>
<li><span> 2 </span>
<div>
Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let saj je
to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja
</div>
</li>
<li><span> 3 </span>
<div>
Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let saj je
to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja
</div>
</li>
<li><span> 4 </span>
<div>
Lorem Ipsum je slepi tekst, ki se uporablja pri razvoju tipografij in pri pripravi za tisk. Lorem Ipsum je v uporabi že več kot petsto let saj je
to kombinacijo znakov neznani tiskar združil v vzorčno knjigo že v začetku 16. stoletja
</div>
</li>
</ul>
</div>
</body>
</html>
Še link do tega htmlja online:
Predogled
