Domov > Programiranje > Pokaži/skrij div na mouseover
stran 1 od 1 |< < 1 > >|
Pokaži/skrij div na mouseover
 
krashek 9. nov 2011 16:04:55 Pridružen od:
12. jan 2011
79 objav
 3 34 0
#1

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


všeč(0) ni všeč(0) spam(0)
www.krasek.info/architecture/design/art/music... [99.9% done]
 
 
AteljeIT 9. nov 2011 16:23:27 Pridružen od:
29. okt 2011
22 objav
 38 0 0
#2

zakaj pa ne das hide/show funkcij na div?


všeč(0) ni všeč(0) spam(0)
Atelje IT - CodeArt
 
 
AteljeIT 9. nov 2011 19:18:14 Pridružen od:
29. okt 2011
22 objav
 38 0 0
#3

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


všeč(2) ni všeč(0) spam(0)
Atelje IT - CodeArt
 
 
Spartacus 9. nov 2011 21:16:18 Pridružen od:
23. dec 2007
642 objav
 828 38 4
#4

Kaj pa jQuery hover?



http://api.jquery.com/hover/


všeč(0) ni všeč(0) spam(0)
 
 
AteljeIT 9. nov 2011 22:10:45 Pridružen od:
29. okt 2011
22 objav
 38 0 0
#5

Uporaba 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 > >|
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se