kostenloser Webspace werbefrei: lima-city


fadeOut eines divs bei hover stoppen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    Salvete omnes!

    Ich bin gerade dabei eine Art "tooltip" zu kreieren und da ich es wegen meiner Unwissenheit nicht selbst erstellen kann, habe ich dafür auch schon so manche Foren durchforstet und mir verschiedene codes angesehen...
    Mir wurde unter anderem diese Lösung präsentiert:
    <script>
    $(document).ready(function () {
        var htimer;
        $("div.details").slideUp(0);
        $("div.h").hover(function() {
          htimer = window.setTimeout(
            function(){$("div.details").fadeIn(600);}, 1000)
          },
          function(){
            window.clearTimeout(htimer);
            $("div.details").fadeOut(3000);
            }
          );
        }
    );
    </script>

    Funktioniert so weit einwandfrei, was mir allerdings Probleme bereitet:
    Wie schaffe ich es, dass "details" nicht nur beim hover erscheint, sondern auch "stehen bleibt", wenn ich mich mit der maus darin befinde?

    Vl. ist es einfach schon zu spät um mir die Lösung vor Augen führen zu können, dennoch hoffe ich, dass mir hier geholfen werden kann :wink:
    mfg Cdot
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hast Du vielleicht eine Beispielseite? Ansonsten fällt mir nur ein, dass Du das ganz anders lösen kannst, wenn ich das Prinzip verstanden habe:
    Der Tooltip ist nicht sichtbar, wenn die Maus außerhalb des Elements "h" ist.
    Wenn man nun darauf fährt, erscheint nach einer Sekunde das Element details.
    Wenn man wieder die Maus wegbewegt, verschwindet das Element wieder nach 3 Sekunden.

    Dann müsste Dir Folgendes helfen können: http://stackoverflow.com/questions/435732/delay-jquery-hover-event.
  4. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    tobiworlds schrieb:
    Hast Du vielleicht eine Beispielseite?

    <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    
    div.first { width: 60px; height: 60px; float: left; background-color: #3f3; }
    div.second { width: 60px; height: 60px; float: left; background-color: blue; }
    div.h { height: 60px; float: left; width:120px; float:left;}
    div.i {width:50px; float:left; background-color:#444444;}
    
    </style>
    
    	<script src="http://code.jquery.com/jquery-1.5.js"></script>
        
    </head>
    <body>
    
    <p><div class="h">Hover Me</div>
    <p><div class="i">Hover Me</div>
    <div class="first" style="position:absolute; margin-left:190px; z-index:80;">Hello</div>
    <div class="second" style="position:absolute; margin-left:190px; z-index:81;">Hallo again</div>
    </p>
    
    <script>
    
    $(document).ready(function () {
        var htimer;
        $("div.first").slideUp(0);
        $("div.h").hover(function() {
          htimer = window.setTimeout(
            function(){$("div.first").fadeIn(600);}, 1000)
          },
          function(){
            window.clearTimeout(htimer);
            $("div.first").fadeOut(3000);
            }
          );
        }
    );
    
    $(document).ready(function () {
        var htimer;
        $("div.second").slideUp(0);
        $("div.i").hover(function() {
          htimer = window.setTimeout(
            function(){$("div.second").fadeIn(600);}, 1000)
          },
          function(){
            window.clearTimeout(htimer);
            $("div.second").fadeOut(3000);
            }
          );
        }
    );
    
    </script>
    </body>
    </html>

    So sieht es derzeit aus (zumindest von der vorlage her)...
    Ansonsten stimmt deine Annahme eigentlich: sobald ".first" oder ".second" erschienen ist, soll der onMouseOut-Effekt nur stattfinden, wenn ich mich auch nicht über dem erschienen div befinde, also nur wenn ich irgendwo auf der restlichen weißen Seite herumfahre bzw. abgebrochen werden, wenn ich mich über dem erschienen div befinde...

    tobiworlds schrieb:
    Dann müsste Dir Folgendes helfen können: http://stackoverflow.com/questions/435732/delay-jquery-hover-event.

    Danke für den Link! Ich hoffe nur, dass ich es als äußerst blutiger Anfänger auf diesem Gebiet, der sich hauptsächlich mit Vorlagen hindurch hilft, schaffe es auch anzuwenden :wink:
  5. cdot schrieb:
    Salvete omnes!

    Ja Tach auch. :wink:

    Wie schaffe ich es, dass "details" nicht nur beim hover erscheint, sondern auch "stehen bleibt", wenn ich mich mit der maus darin befinde?

    Wie wäre es, wenn Du nicht den hover-State abfragst, sondern zun ein- bzw. ausblenden die Events mouseover und mouseout triggerst?
  6. Autor dieses Themas

    cdot

    Kostenloser Webspace von cdot

    cdot hat kostenlosen Webspace.

    fatfreddy schrieb:
    Wie schaffe ich es, dass "details" nicht nur beim hover erscheint, sondern auch "stehen bleibt", wenn ich mich mit der maus darin befinde?

    Wie wäre es, wenn Du nicht den hover-State abfragst, sondern zun ein- bzw. ausblenden die Events mouseover und mouseout triggerst?

    Ein nächster Ansatz, den ich zwar (noch) nicht verstehe, aber welchem ich auf jeden Fall einmal nachgehen werde :wink:
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!