Share hover behaviour between element sets

Uses a jQuery Custom Method to find elements with matching custom data values

HTML

<span class="link MedewerkerPicture" data-id="1">picture 1</span>
<span class="link MedewerkerPicture" data-id="2">picture 2</span>
<br/><br/><br/>
<ul>
    <li><span class="link MedewerkerName" data-id="1">name 1</span></li>
    <li><span class="link MedewerkerName" data-id="2">name 2</span></li>
</ul>

CSS

span.link {
    text-decoration:underline;
    color:Blue;
    cursor:pointer;
}
.MedewerkerPicture.Active,
.MedewerkerName.Active {
    color:Red;
}

JavaScript

$(document).ready(function () {
    var $M = $(".MedewerkerPicture, .MedewerkerName"); //cache
    $M.hover(
        function () { //mouseenter
            $M.havingData("id", $(this).data("id")).addClass("Active");
        }, function () { //mouseleave
            $M.havingData("id", $(this).data("id")).removeClass("Active");
        }
    );
});









// CUSTOM JQUERY METHOD...

// Return selections where specified Data key/value matches
$.fn.havingData = function (key, valueOrRegex) {
    var value = (valueOrRegex instanceof RegExp) ? valueOrRegex : new RegExp(valueOrRegex);
    return this.filter(function () { 
        return ($(this).data(key) || "").toString().search(value) >= 0; 
    });
};