Wie erstelle ich ein Highlight bei mouseover?

Question

Auf my page, wenn ich mouseover einen Zustand, der Hyperlink auf der rechten Seite ändert sich in einen Hover-Stil. Kann mir jemand vorschlagen, wie ich das Gegenteil bewirken könnte? Wenn ich einen der Hyperlinks auf der rechten Seite schwebe, wird der Status hervorgehoben (wie wenn ich über den Status selbst schwebe)?

Answer 1

Sehr einfach mit jQuery's .trigger();

als Beispiel: $('#A0').trigger('mouseover'); würde das erste Element in der Karte (Washington) markieren.

So <a class="staffs staff-A0" href="#">Washington</a> Sie könnte dies zu dem Mouseover-Ereignis hinzu:

var map_element_id = '#' + this.className.split('-')[1]; 
$(map_element_id).trigger('mouseover'); 

und natürlich onMouseOut auch behandelt werden muss. Es gibt viele Möglichkeiten, die Zuweisung der Variable map_element_id zu handhaben. Ich schlage vor, dass Sie ein separates Attribut zuweisen, um dieses zu speichern, anstatt einen Klassennamen (vielleicht Data-Map-ID?). Das Teilen auf "-" funktioniert mit diesem Beispiel, aber stellen Sie sich vor, Sie fügen dem Element, das '-' enthält, weitere Klassennamen hinzu, dies würde fehlschlagen.

Answer 2

Ruft die ID des Kartenbereichs ab und löst das mouseover-Ereignis aus.

$('.staff').mouseover(function() { 
    var id = $(this).attr("class").split("-")[1]; 
    $("#"+id).trigger('mouseover'); 
});