hover/单击/取消选中以突出显示文本

我正在制作一个包含两列的在线英语 – 捷克语并行文本。 这里有一个粗略的版本。 有人提出了明智的建议，将鼠标hover在一个段落上突出显示该段落及其他语言中的相应段落。 这特别有用，因为文本没有完全相同的段落。 这里有一个小小的jsfiddle实现这个想法。

但我想添加一个相关的function。 将鼠标hover在一个段落上，它突出显示它和它的对应物， 点击一个段落，它和它的对应物都保持突出显示， 单击其他地方并突出显示消失。

这容易实现吗？ 我对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"); }); }); }); 

Answer 1

简化了您的代码并添加了点击function： 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"); }); }); 

忍者编辑：添加了正确的答案代码。

Answer 2

基本的例子在这里小提琴。

该代码使用一个变量来指示是否应该删除离开pargraph（ mouseleave ）高亮显示的oon。 默认行为是删除突出显示，只有当点击的目标是label时，才会在点击时更改。 单击任意位置会删除突出显示，因此将鼠标hover在其他段落上。 可用性方面，您可能希望改变此行为，以便使点击产生的突出显示更加永久，更难以意外关闭。

 var stayHighlighted = false; $(document).ready(function() { $(document).click(function(e){ if ($(e.target).is(':not(label)') ) { $('.highlight').removeClass('highlight'); stayHighlihted = false; } else { stayHighlighted = true; } }); $("label").mouseenter(function() { $(".highlight").removeClass("highlight"); $("label." + $(this).attr("class") ).addClass("highlight"); }); $("label").mouseleave(function() { if (!stayHighlighted) { $(".highlight").removeClass("highlight"); } else { stayHighlighted = false; } }); });​ 

Answer 3

这接近你所追求的。 hover()照常工作（注意我使用了hover()和toggleClass()而不是hover()和mouseleave() 。当你点击时，突出显示仍然存在。要删除突出显示，只需再次单击该段落（这似乎更多用户）友好而直观，而不是“点击任何地方”。）它还允许选择多个段落，并且代码非常干净。

 $(document).ready(function() { // Capture hover $("label").on("hover click", function(e) { var $label = $("label[class='" + $(this).attr("class") + "']"); if(e.type == "click") $label.toggleClass("clicked"); else $label.toggleClass("highlight"); }); });​ 

这是一个工作小提琴 。