How to overlay div / box bei mouseover?

Ich habe einen link und wenn der Benutzer den Mauszeiger über Sie, Sie sollte die Anzeige einer box (div) unter dem link. Die box sollte überlagern, was unter ihm ist. Wie kann ich es mit css oder javascript?

InformationsquelleAutor svirk | 2010-10-06
  1. 6

    Habe ich eine Beispiel hier. Sie können ändern, von dort, um Ihre Bedürfnisse anzupassen.

    <div class="hover">Hover here</div>
<div class="overlay" style="visibility:hidden">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="google" />
</div>​


$(document).ready(function()
{
  $("div.hover").mouseover(function ()
  {
    $(this).css('cursor', 'pointer');
    $("div.overlay").css('visibility','visible');
  });
  $("div.hover").mouseout(function ()
  {
    $(this).css('cursor', 'default');
    $("div.overlay").css('visibility','hidden');
  });
});
    • Wenn ich einen div-Rahmen overlay und wollen overlay zu legen darüber, wie es zu tun? Derzeit sehe ich white-space erstellt wurden, zeigen bei einem overlay werden dsplayed.
    • Das overlay-div nicht wirklich-overlay. Dies löst nicht das problem "Die box sollte überlagern, was unter ihm ist."
    InformationsquelleAutor bla
  2. 11

    Haben Sie einen absolut positionierten div ausgeblendet ist, und ein Kind der link. Dann, wenn Sie den Mauszeiger über den link, sollten Sie einblenden der div. Ich kann keine volle CSS, und ich habe es nicht getestet, aber das sollte Ihnen den Einstieg. Sie müssen spielen, um mit der Positionierung und Größen.

    <a href="#" class="special">Somewhere<div class="desc">This is hidden.</div></a>

a.special { position:relative; }
a.special div.desc { background-color:white; display:none; position:absolute; z-index:100; }
a.special:hover div.desc { display:block; }

    Dieser wäre der pure-CSS Weg.

    • Es ist wirklich gut, wie es benötigt kein javascript. Vielen Dank !!!
    InformationsquelleAutor Edgar
  3. 0
    $("#id").mouseover(function(){
   $("a[rel='#petrol']").overlay().load();
});
$("#id").mouseout(function(){
   $("a[rel='#petrol']").overlay().close();
});
    • Zu verbessern, die Qualität Ihrer post, bitte zählen, wie/warum dieser code wird das problem lösen.
    InformationsquelleAutor Ahsan Hussain
Schreibe einen Kommentar