Domov > Programiranje > Pokaži/skrij div na mouseover
stran 1 od 1 |<<1>>|
Pokaži/skrij div na mouseover
 
krashek9. nov 2011 17:04:55Pridružen od:
12. jan 2011
79 objav
+3-340
#1Torej 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
všeč(0)ni všeč(0)spam(0)
www.krasek.info/architecture/design/art/music... [99.9% done]
 
 
AteljeIT9. nov 2011 17:23:27Pridružen od:
29. okt 2011
22 objav
+3800
#2zakaj pa ne das hide/show funkcij na div?
všeč(0)ni všeč(0)spam(0)
Atelje IT - CodeArt
 
 
AteljeIT9. nov 2011 20:18:14Pridružen od:
29. okt 2011
22 objav
+3800
#3Ok, 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
nazadnje urejal AteljeIT 9. nov 2011 20:22:15
všeč(+2)ni všeč(0)spam(0)
Atelje IT - CodeArt
 
 
Spartacus9. nov 2011 22:16:18Pridružen od:
23. dec 2007
342 objav
+236-101
#4Kaj pa jQuery hover?

http://api.jquery.com/hover/
všeč(0)ni všeč(0)spam(0)
Spartak |Stranka je kralj | Spartak na Squidoo
 
 
AteljeIT9. nov 2011 23:10:45Pridružen od:
29. okt 2011
22 objav
+3800
#5Uporaba javascripta pri temu problemu je zanimiva, ampak ce ni potrebe po nekih hudih animacijah je javascript le nepotreben overhead za browser
všeč(+1)ni všeč(0)spam(0)
Atelje IT - CodeArt
 
 
Domov > Programiranje > Pokaži/skrij div na mouseover
stran 1 od 1 |<<1>>|