Javascript 使用键盘悬停

我正在创建一个需要通过键盘访问的活动，但我不知道如何访问。活动就在这里，我已经按照自己的意愿进行了。但它需要仅通过键盘访问。我正在使用图像地图

HTML

JavaScript

 // javascript

// Set up some options objects: 'single_opts' for when a single area is selected, which will show just a border
// 'all_opts' for when all are highlighted, to use a different effect - shaded white with a white border
// 'initial_opts' for general options that apply to the whole mapster. 'initial_opts' also includes callbacks
// onMouseover and onMouseout, which are fired when an area is entered or left. We will use these to show or
// remove the captions, and also set a flag to let the other code know if we're currently in an area.

var inArea,
map = $('#beatles'),
    captions = {
        paul: ["Data - Bass Guitar and Vocals",
            "Paul McCartney's song, Yesterday, recently voted the most popular song " + "of the century by a BBC poll, was initially composed without lyrics. " + "Paul used the working title 'scrambled eggs' before coming up with the final words."],
        ringo: ["Organizational Structures - Drums",
            "Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, " + "when she wouldn't come out and play with Mia and the Beatles at a religious retreat " + "in India."],
        john: ["Interests - Guitar and Vocals",
            "In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool " + "contest principally because they called in posing as different people and voted " + "for themselves numerous times."],
        dog: ["Woof -Woof"],
        george: ["Relationships - Lead Guitar and Vocals",
            "The Beatles' last public concert was held in San Francisco's Candlestick " + "Park on August 29, 1966."]

    },
    single_opts = {
        fillColor: '000000',
        fillOpacity: 0,
        stroke: true,
        strokeColor: 'ff0000',
        strokeWidth: 4
    },
    all_opts = {
        fillColor: 'ffffff',
        fillOpacity: 0,
        stroke: false,
        strokeWidth: 0,
        strokeColor: 'ffffff'
    },
    initial_opts = {
        mapKey: 'data-name',
        isSelectable: false,
        onMouseover: function (data) {
            inArea = true;
            $('#beatles-caption-header').text(captions[data.key][0]);
            $('#beatles-caption-text').text(captions[data.key][1]);
            $('#beatles-caption').show();
        },
        onMouseout: function (data) {
            inArea = false;
            $('#beatles-caption').hide();
        }
    };
opts = $.extend({}, all_opts, initial_opts, single_opts);


// Bind to the image 'mouseover' and 'mouseout' events to activate or deactivate ALL the areas, like the
// original demo. Check whether an area has been activated with "inArea" - IE<9 fires "onmouseover" 
// again for the image when entering an area, so all areas would stay highlighted when entering
// a specific area in those browsers otherwise. It makes no difference for other browsers.

map.mapster('unbind')
    .mapster(opts)
    .bind('mouseover', function () {
    if (!inArea) {
        map.mapster('set_options', all_opts)
            .mapster('set', true, 'all')
            .mapster('set_options', single_opts);
    }
}).bind('mouseout', function () {
    if (!inArea) {
        map.mapster('set', false, 'all');
    }
});

//javascript
//设置一些选项对象：“single_opts”用于选择单个区域时，仅显示边框
//“all_opts”用于在高亮显示所有对象时，使用不同的效果-带白色边框的着色白色
//“initial_opts”用于适用于整个mapster的常规选项“初始选项”还包括回调
//onMouseover和onMouseout，在进入或离开某个区域时触发。我们将使用这些来显示或
//删除标题，并设置一个标志，让其他代码知道我们当前是否在某个区域。
瓦伊纳雷亚，
map=$（“#披头士”），
标题={
保罗：[“数据-低音吉他和人声”，
“保罗·麦卡特尼（Paul McCartney）的歌曲，昨天，最近被BBC民意调查评为本世纪最受欢迎的歌曲“+”，最初是没有歌词创作的。”+“保罗在给出最后的歌词之前使用了工作标题“炒蛋”。]，
ringo:[“组织结构-鼓”，
“亲爱的普律当丝是约翰和保罗写的关于米娅·法罗的妹妹普律当丝的书，“+”当她不出来和米娅和披头士在印度的一个宗教静修会上玩“+”，
约翰：[“兴趣-吉他和声乐”，
“1962年，披头士乐队赢得了Mersyside报社在利物浦最大的乐队“+”比赛，主要是因为他们扮成不同的人打电话，并多次为自己投“+”，
狗：[“汪-汪”]，
乔治：[“关系-主唱吉他和声乐”，
“披头士乐队的最后一场公开音乐会于1966年8月29日在旧金山的烛台公园举行。”]
},
单个选项={
fillColor:'000000'，
不透明度：0，
中风：是的，
strokeColor:'ff0000'，
冲程宽度：4
},
所有选项={
fillColor:'ffffff'，
不透明度：0，
笔画：错，
冲程宽度：0，
strokeColor:“ffffff”
},
初始选项={
mapKey:'数据名'，
可选择：错误，
onMouseover：函数（数据）{
inArea=真；
$（“#披头士标题”）.text（标题[data.key][0]）；
$（“#披头士字幕文本”）.text（字幕[data.key][1]）；
$（“#披头士字幕”）.show（）；
},
onMouseout：函数（数据）{
inArea=假；
$（“#披头士字幕”）.hide（）；
}
};
opts=$.extend（{}，所有选项，初始选项，单个选项）；
//绑定到图像“mouseover”和“mouseout”事件以激活或停用所有区域，如
//原始演示。检查某个区域是否已被“inArea”激活-即这肯定不是一个完整的答案，但希望它能为您指明正确的方向（对不起，我还没有足够的声誉发表评论！）

我得到了一个要在keypress上显示的警报，但我无法准确地找出代码中需要什么来导致标题弹出。我在“onMouseover:”之后找到了这段代码，并将其拼接到jQuery代码中，以实现按键功能触发器，但它并没有像我所希望的那样工作。我能够让它显示如下所示的警报，所以我知道它至少注册了按键

$(document).ready(function(){
  $(document).keypress(function(){
          alert("test");
    });
});

将鼠标移到对焦或调焦位置，将鼠标移到模糊或调焦位置。这很好。能否在元素上设置一个
选项卡index
@dandavis我应该换成focusin吗？还是鼠标移到焦点上？对不起，我对这个很陌生。你能告诉我要做什么改变吗work@MonkeyZeus我试图设置一个tabindex，但似乎不起作用
$(document).ready(function(){
  $(document).keypress(function(data){
        inArea = true;
        $('#beatles-caption-header').text(captions[data.key][0]);
        $('#beatles-caption-text').text(captions[data.key][1]);
        $('#beatles-caption').show();
    });
});

$(document).ready(function(){
  $(document).keypress(function(){
          alert("test");
    });
});