按住键时更改悬停样式

Question

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

<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>

通过 CSS 插入按钮，例如：

table.mybutton {
    border : 1px solid;
    border-radius : 8px;
    border-spacing : 2px;
    font-size : 80%;
    display : inline-table;
    cursor : pointer;
}
table.mybutton:hover {
    background-color : black;
    color : white;
}

根据是否通过此 Javascript 按住 Shift 键，我设法让它访问两个 URL 之一：

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 键而改变。这能做到吗？可以在没有额外库的情况下完成吗？

示例小提琴

Answer 1

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

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

然后你可以在你的 CSS 中选择那个类：

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