Question

我正在创建一个处理古代藏文经译的互动网站。我希望两者只要用户将鼠标悬停在英文或藏文脚本上，就会突出显示英语和藏文等价物。

到目前为止，我一直在使用Tooltips（一个wordpress插件）来生成一个显示在上面的对话框。 My Site for Reference... 我不关心使用此方法时出现的虚线下划线，也不关心对话框。如果我能实现另一种方法，我觉得用户体验会更加清晰。

Answer 1

我捣毁了一个小小提琴来解决你的问题：http://jsfiddle.net/6BH27/

您必须在要连接的每个单词周围添加span，并将该单词作为其title属性放入另一种语言中。其余的将由Javascript管理。

JS代码：

$('span[title]').hover(
    function() {
        $(this).addClass('highlight');
        $('span:contains("'+$(this).attr('title')+'")').addClass('highlight');
    },
    function() {
        $(this).removeClass('highlight');
        $('span:contains("'+$(this).attr('title')+'")').removeClass('highlight');
    }
);

修改：这就是您网页上的内容。 http://jsfiddle.net/6BH27/1/

Answer 2

这也是另一件可能有用的事情。它会在悬停时突出显示每个文本。您可以编辑jquery部件以满足您的需要。

<style>
        #english {
        display:inline-block;
        }
        #tibetan {
        display:inline-block;
        }
    </style>
    <script>
    $(function () {
        $("#english").mouseenter(function () {
            $("#tibetan").css("background-color", "yellow")
            $("#english").css("background-color", "yellow")
        })
        $("#tibetan").mouseenter(function () {
            $("#tibetan").css("background-color", "yellow")
            $("#english").css("background-color", "yellow")
        })
        $("#english").mouseleave(function () {
            $("#tibetan").css("background-color", "transparent")
            $("#english").css("background-color", "transparent")
        })
        $("#tibetan").mouseleave(function () {
            $("#tibetan").css("background-color", "transparent")
            $("#english").css("background-color", "transparent")
        })
    });
    </script>
    <p id="tibetan" title="&#3914;&#3954;&#3926;&#3962;&#3919;&#3923;&#3851;">&#3914;&#3954;&#3926;&#3962;&#3919;&#3923;&#3851;</p><br />
    <p id="english" title="English">English</p>

将鼠标悬停在单个单词或短语上时突出显示多个单词？

2 个答案: