悬停/单击/取消单击以突出显示文本 [英] Hovering/clicking/unclicking for highlighting text

问题描述

我正在研究两列在线英语-捷克语平行文本. 此处.有人提出了一个聪明的建议，那就是将鼠标悬停在一个段落上时会以另一种语言突出显示该段落及其对应的段落.这是特别有用的，因为文本没有完全相同的段落. 此处.

但是我想添加一个相关功能. 将鼠标悬停在一个段落上，并突出显示该段落和它的对应部分，然后点击点击，然后将其和它的对应部分保持，突出显示，单击其他地方，突出显示就会消失.

这容易实现吗?我对javascript几乎一无所知，而我只是在使用别人的代码:

$(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");
        });
    });
});

解决方案

简化了代码并添加了单击功能:

忍者添加了正确的代码来回答.

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");
        });
    });
});

解决方案

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.

这篇关于悬停/单击/取消单击以突出显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！