jQuery deaktivieren hover-mit klicken Sie auf

Ich habe einen jQuery-code, der so funktioniert, wie ich erwarte, dass er zu einem bestimmten Punkt.
Hier ist die Geige

Drei Menüpunkte, wenn Sie mit der Maus auf, ein Schwarzes Quadrat und zusätzliche info erscheint in der gelben box.
Beim anklicken Menü 1 & 3, ist ein grüner Kreis angezeigt, bevor das Menü.
Beim anklicken im Menü 2, eine Suchleiste erscheint auch und wird im Fokus mit ein wenig Verzögerung.

Bis zu diesem Punkt ist alles in Ordnung.

Was ich will, ist, zum Beispiel:

-wenn 'menu_item'_2 geklickt und ich Weg bewegen Sie die Maus über einem anderen Element, in das gelbe Feld "info_2" muss gezeigt werden.

Also sollte ich irgendwie fallen die hover-nach einem Klick gemacht hat.
Und wenn ich auf einem anderen menu_item es sollte zeigen, die entsprechende info in der gelben box.

Ich bin kein Experte in jQuery, also vielleicht der code muss getan werden, auf eine andere Weise.

Trotzdem, vielen Dank für deine Hilfe!

$(function() {

$("#search").hover( 
    function() {
        $("#search_info").show();
        $("#arrow").show().css('top', 230);
        $("#fade_search").animate({ opacity: 0.4},50);
    },
    function() {
        $("#arrow, #search_info").hide();
        $("#fade_search").animate({ opacity: 1},50);       
    }).click(function(e) { 
             $("#activated").show().css('top', 232);
             var focusDelay = $("input[type=text]").fadeIn(100);            
                 setTimeout(function(){
                     $(focusDelay).focus();
                 },1000);
             e.preventDefault();
            });

$("#list").hover( 
    function() {
        $("#list_info").show();
        $("#arrow").show().css('top', 205);
        $("#fade_list").animate({ opacity: 0.4},50);
    },
    function() {
        $("#arrow, #list_info").hide();
        $("#fade_list").animate({ opacity: 1},50);

    }).click(function(e) {  show up
             $("#activated").show().css('top', 209 );
             e.preventDefault();
            });

$("#program").hover( 
    function() {
          $("#program_info").show();
          $("#arrow").show().css('top', 255);
          $("#fade_program").animate({ opacity: 0.4},50);
      },
    function() {
          $("#arrow, #program_info").hide();
          $("#fade_program").animate({ opacity: 1},50);

    }).click(function(e) {
             $("#activated").show().css('top', 261 );
             e.preventDefault();
             });
});
  • Nur um einige Klarstellungen: der text soll nicht angezeigt werden auf hover nachdem Sie geklickt haben, ein Menü zu einmal, sondern es sollte dann aktiviert werden, die nur auf Klicks im Menü?
  • ja, das ist wahr. nach Klick es sollte zeigen, den text des entsprechenden Menüpunktes.
  • Ich arbeite an einer sauberen Lösung mit klaren Beispielen, nur halt ein bisschen mehr. 🙂
  • vielen Dank, ich freue mich es zu sehen! 🙂
InformationsquelleAutor marchello | 2012-01-19
Schreibe einen Kommentar