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

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键是否也按住来改变。可以这样做吗？可以在没有额外库的情况下完成吗？

Example Fiddle

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

Answer 2

不确定。使用附加到按钮的“鼠标悬停”事件。

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

按住键时悬停时更改样式

2 个答案: