2009-06-10 5 views
3

Gibt es eine alternative Methode oder einen Trick für die Hover-Methode, die eine Funktion auslösen kann, wenn der Cursor von einem Div zu einem anderen bewegt wird, während der Benutzer die Seite scrollt.Wer kennt einen Mauszeigertrick/eine Alternative, die beim Scrollen mit der Tastatur ausgelöst wird

Ich habe Art von habe es funktioniert mit einigen Javascript (jQuery) auf dem Hover-Ereignis der aktuellen Post Div. Ich habe jedoch bemerkt, dass das Hover-Ereignis nur ausgelöst wird, wenn die Maus tatsächlich bewegt wird. Wenn die Seite mit der Tastatur (Seite) nach oben/unten gescrollt wird, wird sie nicht ausgelöst.

(kann ich das soup.io zum Beispiel beachten Sie hat einen Weg gefunden, diese Funktion zu erhalten, aber ich kann nicht finden, wie sie es tun)

+0

Ich sehe nicht, es auf soup.io in Firefox zu arbeiten. Welchen Browser benutzen Sie und welches Verhalten sehen Sie? –

+0

Sorry, ich hätte klarer sein können, sehe ich. Hier sind einige zusätzliche Informationen. Was ich vorhabe, ist dies: Auf einem Blog (davur.net) zeige ich die Kommentare neben jedem Beitrag an, aber ich habe es zu .30 Opazität verblasst. Aber für den aktuellen Beitrag möchte ich, dass die Kommentare auf 1,00 Opazität eingeblendet werden. Dies wird derzeit mithilfe des Hover-Ereignisses implementiert. Wird jedoch nicht beim Scrollen der Tastatur ausgelöst. Mein Vergleich zu sup.io ist, dass sie ein [# | repost | reagieren share], die anfangs ausgeblendet ist, aber nur auf dem aktuellen Post angezeigt wird. Dies wird sowohl beim Hover- als auch beim Tastatur-Scrollen ausgelöst. – davur

+0

Der soup.io-Trick (wie auch immer er funktioniert) löst beim Scrollen mit der Tastatur in Firefox 3.0, Safari 4, Chrome, IE8 (wenn auch nicht immer), Opera 9.64 (wenn auch mit leichter Verzögerung) aus. Mein Hover-Ansatz funktioniert mit Firefox und Opera, aber nicht mit Chrome, IE oder Safari. – davur

Antwort

1

Leider ist es ziemlich kompliziert; Sie können sich nicht mehr auf das Ereignis verlassen - das einzige Ereignis, das ausgelöst wird, wenn eine Seite gescrollt wird, ist onScroll. Die beteiligten Schritte:

  1. Gehen Sie durch Elemente, Speichern von jeder ihrer Breiten, Höhen und Offsets (Abstand von links/oben auf dem Bildschirm) in einem Array.
  2. Wenn das onScroll-Ereignis ausgelöst wird, überprüfen Sie die letzte bekannte Position des Cursors gegen alle ausgewählten Elemente (durchlaufen Sie das Array) - wenn sich der Cursor über einem der Elemente befindet, rufen Sie den Handler auf.

Quick (unzuverlässigen) Prototyp: http://pastie.org/507589

+0

Ich mag diese Idee. Ich persönlich würde nur Höhen und y-Offsets benötigen, da die Divs/Posts vertikal aufgelistet sind. Ich gebe das eine Chance. – davur

0

Haben Sie eine Probe? Ich vermute, dass das Layout der Elemente auf der Seite das Ereignis mouseover blockiert. Mein einfaches Beispiel funktioniert so, wie Sie es beschrieben haben. Mit dem Cursor am oberen Rand der Seite und der Tastaturnavigation werden die Ereignisse mouseover ausgelöst.

<html> 
<body> 
<script> 
function log(text) 
{ 
    document.getElementById('logger').value += text + "\n"; 
} 
</script> 

<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');"> 
div1 
</div> 
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea> 
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');"> 
div2 
</div> 
</body> 
</html> 
+0

Das ist ähnlich wie das, was ich bereits habe. Es funktioniert nicht auf der Tastatur Scrollen in Chrome, IE oder Safari. – davur

0

Sie suchen nach dem Mausrad-Ereignis.

document.getElementById('myDiv').onmousewheel = function() { 
    alert('You win!'); 
    alert('Seriously! It's just like that'); 
}; 

Getestet habe ich dies nur in Chrome (Webkit)