Rejtett div megjelitése eltüntetése onmuseover-re

Rejtett div megjelitése eltüntetése onmuseover-re
2014-08-06T16:06:16+02:00
2014-08-07T20:32:41+02:00
2022-10-15T22:10:26+02:00
Jamborka
A következő kérdésem , lenne adott egy tartalom, a lenti kóddal jelenítem meg, elő jön és el is tűnik a hideolt div ahogy illik, de azt hogy lehetne megoldani, hogy ne tűnjön el ha leviszem róla az egeret oldara, viszont ha egy másik section, felé viszem akkor eltűnjön, és a másik legyen látható, a   tartalom amiről beszéltem itt található

elég kezdő vagyok a témában, csak barátom pizzériájának akarok egy egyszerű oldalt összehozni.

a funkció az onmouse eventhet

<script> function show(id) { document.getElementById(id).style.display = "block"; } function hide(id) { document.getElementById(id).style.display = "none"; } </script> <?php include 'connect.php'; $akcio = mysql_query("SELECT * FROM akcio") or die(mysql_error()); while ($row = mysql_fetch_array($akcio) ) { if ($row['pepsi'] == 1) { echo "<div class='akcios'>".$row['akcio_neve']."<br/><img src=images/Pepsi.png height='60' width='100'>"."</div>"; } else { echo "<div class='akcios'>".$row['akcio_neve']."</div>"; } } ?> </aside> <main class="tartalom"> <?php include 'connect.php'; $result = mysql_query("SELECT * FROM arlista") or die(mysql_error()); echo "<div class='cim'>Pizza</div>"; echo "<div class='cim_kicsi_ar'>33 cm</div>"; echo "<div class='cim_nagy_ar'>50 cm</div>"; $x =0; while($row = mysql_fetch_array($result)) { ++$x; echo "<section class='fokeret' onMouseOver=show('leir$x');hide('div$x') onMouseOut=hide('leir$x');show('div$x')>"; echo "<div class='pizza'>" . $row['pizza_nev'] ."</div>"; echo "<div class='kicsi_ar'>" . $row['kicsi_ar'] . "</div>"; echo "<div class='nagy_ar'>" . $row['nagy_ar'] . "</div>"; echo "<div class='leiras' id='div$x' >" .$row['osszetevok'] . "</div>"; if ($row['ajandek'] == 0) { // ajándék meghatározása echo "<div class='leir' id='leir$x' ><img src='images/sidebar-flat-pizza.png' width='70' height='70' style='float:left'/> " . "<img src=images/Pepsi.png height='60' width='100' style='float:right'>" .$row['osszetevok'] . "</div>"; } else { echo "<div class='leir' id='leir$x' ><img src='images/sidebar-flat-pizza.png' width='70' height='70' style='float:left'/> " .$row['osszetevok'] . "</div>"; } echo "</section>"; } ?>
Mutasd a teljes hozzászólást!
És esetleg így
<script type="text/javascript"> var melyik = ''; function mutat(szam) { if(szam != melyik) { document.getElementById("lathatodiv"+szam).style.display="block"; if(melyik != '') { elrejt(melyik); } melyik = szam; } } function elrejt(szam) { document.getElementById("lathatodiv"+szam).style.display="none"; } </script> <h1>Rejtett div megjelitése eltüntetése onmuseover-re(Jamborka)</h1> <div id="div1" onmouseover="mutat('1')" style="width:400px;height:30px;margin:0 auto;background-color:lightgreen;cursor:pointer;"> mutasd a div1-et </div> <div id="lathatodiv1" style="width:400px;margin:0 auto;border:1px dotted black;background-color:pink;display:none;"> Ez az egyes<br />rejtett </div> <div id="div2" onmouseover="mutat('2')" style="width:400px;height:30px;margin:0 auto;background-color:lightgreen;cursor:pointer;"> mutasd a div2-őt </div> <div id="lathatodiv2" style="width:400px;margin:0 auto;border:1px dotted black;background-color:pink;display:none;"> Ez a kettes<br />rejtett </div> <div id="div3" onmouseover="mutat('3')" style="width:400px;height:30px;margin:0 auto;background-color:lightgreen;cursor:pointer;"> mutasd a div3-at </div> <div id="lathatodiv3" style="width:400px;margin:0 auto;border:1px dotted black;background-color:pink;display:none;"> Ez a hármas<br />rejtett </div>
...?...
csörnyeföldi@ -> Bocsi, hogy a Te kódodból indultam ki, de így kevesebbet kellett pötyögni...
Mutasd a teljes hozzászólást!

  • Egyszerű.
    A felbukkanó divnek is legyen egy onmouseover eseménye amiben lefut a show() függvény.
    Mutasd a teljes hozzászólást!
  • sajnos nem működik az általad említett módon, ez nehezbb mint gondoltam :)
    Mutasd a teljes hozzászólást!
  • Használj függvényen kívüli boolen változót a megjelent-re, melyet falsra állítasz ha már over-re megjelent, az out-ba legyen bent feltételként, hogy ne tűnjön el, és a másik section tudja azt visszaállítani hover-re...
    Természetesen a DIV-ed display:none/block css-vel vezérled...
    Mutasd a teljes hozzászólást!
  • Nem egyszerűbb:



    <script> function mover() { document.getElementById("lathatodiv").style.display="block" } function mout() { document.getElementById("lathatodiv").style.display="none" } </script> <div id = "div1" onmouseover="mover()" onmouseout="mout()"> mutasd a divet </div> <div id = "lathatodiv" style="border:1px dotted black"> Ez van </div> </body>
    Mutasd a teljes hozzászólást!
  • <section class="fokeret" onmouseout="hide('leir1');show('div1')" onmouseover="show('leir1');hide('div1')"> <div class="pizza"> Kolbászos </div> <div class="kicsi_ar"> 800 Ft </div> <div class="nagy_ar"> 1900 Ft </div> <div id="div1" class="leiras" style="display: block;"> par. alap, kolbász, kukorica, sajt </div> <div id="leir1" class="leir" style="display: none;"> <img width="70" height="70" style="float:left" src="images/sidebar-flat-pizza.png"></img> par. alap, kolbász, kukorica, sajt </div> </section>
    ez lenne a html kimente a tartalomnak és ugye az onmouse megforditja a két div láthatóságát, lehet nem egy elegáns kód, de működik, és ami nekem fontos én csináltam, nem mással csináltattam meg :)
    viszont itt elakadtam, egy ilyesmi megoldást szerettem volna készítteni, mit itt látható ugye itt is megjelenik egy div, csak itt ha leviszem róla az egeret úgy marad, de mint nézegettem a kódot ott lehet nem is ilyen módon van megoldva a történet hanem jquery-vel.
    Mutasd a teljes hozzászólást!
  • Ha neked jó, akkor nekem is
    Mutasd a teljes hozzászólást!
  • És esetleg így
    <script type="text/javascript"> var melyik = ''; function mutat(szam) { if(szam != melyik) { document.getElementById("lathatodiv"+szam).style.display="block"; if(melyik != '') { elrejt(melyik); } melyik = szam; } } function elrejt(szam) { document.getElementById("lathatodiv"+szam).style.display="none"; } </script> <h1>Rejtett div megjelitése eltüntetése onmuseover-re(Jamborka)</h1> <div id="div1" onmouseover="mutat('1')" style="width:400px;height:30px;margin:0 auto;background-color:lightgreen;cursor:pointer;"> mutasd a div1-et </div> <div id="lathatodiv1" style="width:400px;margin:0 auto;border:1px dotted black;background-color:pink;display:none;"> Ez az egyes<br />rejtett </div> <div id="div2" onmouseover="mutat('2')" style="width:400px;height:30px;margin:0 auto;background-color:lightgreen;cursor:pointer;"> mutasd a div2-őt </div> <div id="lathatodiv2" style="width:400px;margin:0 auto;border:1px dotted black;background-color:pink;display:none;"> Ez a kettes<br />rejtett </div> <div id="div3" onmouseover="mutat('3')" style="width:400px;height:30px;margin:0 auto;background-color:lightgreen;cursor:pointer;"> mutasd a div3-at </div> <div id="lathatodiv3" style="width:400px;margin:0 auto;border:1px dotted black;background-color:pink;display:none;"> Ez a hármas<br />rejtett </div>
    ...?...
    csörnyeföldi@ -> Bocsi, hogy a Te kódodból indultam ki, de így kevesebbet kellett pötyögni...
    Mutasd a teljes hozzászólást!
  • Pontosan ilyenre gondoltam :) és lehet rosszul írtam le :)

    köszönöm szépen mindenkinek :)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd