Question

I’m working on an online English-Czech parallel text with two columns. There is a rough version here. Someone made the smart suggestion to have it where hovering the mouse over a paragraph highlights both that paragraph and its corresponding paragraph in the other language. This is especially useful because the texts do not have the exact same paragraphing. There is a smallish jsfiddle implementing this idea here.

But I’d like to add a related feature. Hover over a paragraph and it highlights both it and its counterpart, click on a paragraph and both it and its counterpart remain highlighted, click elsewhere and the highlighting goes away.

Would this be easy to implement? I know almost nothing about javascript, and I’m just using another person’s code:

$(document).ready(function() {
    $("label").hover(function() {
        $("label[class='" + $(this).attr("class") + "']").each(function(){
            $(this).addClass("highlight");
        });
    });

    $("label").mouseleave(function() {
        $("label[class='" + $(this).attr("class") + "']").each(function(){
            $(this).removeClass("highlight");
        });
    });
});

Answer 1

Simplified your code and added the click functionality: DEMO

$(document).ready(function() {
    $("label").mouseenter(function() {
        $label = $(this).attr("class");
        $('.'+$label).addClass("highlight");
    });
    $("label").mouseleave(function() {
        $label = $(this).attr("class");
        $('label[class="'+ $label +'"]').removeClass("highlight");
    });
    $("label").click(function(event) {
        event.stopPropagation();
        $label = $(this).attr("class");
        $('label[class="'+ $label +'"]').addClass("highlight-click");
    });
    $('html').click(function() {
        $('label').removeClass("highlight-click");       
    });
});

ninja edit: Added correct code to answer.