Javascript 在按住键的同时更改悬停时的样式

我已经设置了一种样式来旋转单单元格表格，例如：

<TABLE ONCLICK='goSomewhere("http://en.wiktionary.org/wiki/yes", "http://en.wiktionary.org/wiki/no")' CLASS="mybutton">
    <TR>
        <TD>This is a button</TD>
    </TR>
</TABLE>

我已经设法让它访问两个URL中的一个，这取决于是否通过以下Javascript按下Shift键：

var shift = false;

function shiftHandler(event) {
    shift = event.shiftKey;
};

window.addEventListener("keydown", shiftHandler, false);
window.addEventListener("keypress", shiftHandler, false);
window.addEventListener("keyup", shiftHandler, false);

function goSomewhere(url1, url2) {
    if (shift) {
        window.location.href = url2;
    } else {
        window.location.href = url1;
    }
}

function goSomewhereElse(url) {
    window.location.href = url;
}

最后一点是，我希望在悬停时按钮的背景色根据是否按住Shift键而改变。这能做到吗？没有额外的库可以完成吗

---

当然可以。使用按钮上附加的“鼠标悬停”事件

var element = document.getElementById("#button-id");
element.addEventListener("mouseover", function(event) {
    if (shift) {
         //make the color change here
    }
})

---

我可以通过在按下或释放键时更改元素的类来实现。在代码中添加一行：

function shiftHandler(event) {
    shift = event.shiftKey;
    document.body.className = shift ? 'shift-pressed' : '';
};

然后，您可以在CSS中选择该类：

.shift-pressed table.mybutton:hover {
    background-color: green;
    color: white;
}

---

你有充分的理由不使用实际的按钮吗？@CBroe这与解决这个问题的难度有关系吗？Noobish问题，但由于事件侦听器附加到特定的ID元素，我还需要在循环中再次获取elemenentbyid来更改样式吗？您可以从事件对象中提取元素，或者使用原始元素变量。我喜欢这样，它可以工作。。。一旦我点击了页面上的某个地方。不过，在我这么做之前，这似乎不需要花时间。有什么想法吗？（Firefox35.0.1）别担心，这可能只是JSFIDLE的一个奇怪之处。在真正的页面上效果很好。谢谢如果没有键盘焦点，您将无法获得任何关键事件，这在整个页面上都是自动的，但不是JSFIDLE使用的iFrame。它可以在没有焦点的情况下读取shift键，但只能在指针移动时读取。（blacksquare，谢谢你的创意！）

.shift-pressed table.mybutton:hover {
    background-color: green;
    color: white;
}