fadeOut eines divs bei hover stoppen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
cdot

cdot hat kostenlosen Webspace.
3:42, 27.11.2012
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
mfg Cdot
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

tobiworlds hat kostenlosen Webspace.

16:31, 27.11.2012
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.

Autor dieses Themas

23:43, 27.11.2012

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:

fatfreddy

fatfreddy hat kostenlosen Webspace.

0:17, 28.11.2012

cdot schrieb:
Salvete omnes!

Ja Tach auch.

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?
Autor dieses Themas
cdot

cdot hat kostenlosen Webspace.

1:04, 28.11.2012

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city