Question

我在css中有一个带背景线性渐变的按钮，但是我希望在单击按钮时反转渐变。这就是事情，我的意思是点击，因为＆＃34;郁闷＆＃34;比如当鼠标悬停在按钮上并按下鼠标按钮时，但是当你松开鼠标按钮时，我希望它恢复正常。当我尝试搜索此内容时，我会在点击按钮后永久更改按钮获得一堆答案，但是我只想在按下按钮时更改按钮的背景颜色。我该怎么做呢？

Answer 1

您可能想要使用：active pseudo class。

button:active {
    background: red;
}

请参阅此示例：http://jsfiddle.net/1jnb8yd6/

Answer 2

button:active {
    // Background color code for inverse gradient
}

Answer 3

你好，这是你在CSS中的表现：

button:active{
    background-color:red;
}

这里是JS：

<button type="button"
    onmousedown="this.style.backgroundColor='red'"
    onmouseup="this.style.backgroundColor=''"
>CLICK ME</button>

Answer 4

您可以对事件addClass和removeClass使用mousedown和mouseup。

＆＃13;

$(function() {
    $('button').on('mousedown', function() {
        $(this).addClass('down');
    });
    $('button').on('mouseup', function() {
        $(this).removeClass('down');
    });
});

＆＃13;

button {
  background: -webkit-linear-gradient(red, orange); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, orange); /* Standard syntax */
}
button.down {
  background: -webkit-linear-gradient(orange, red); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(orange, red); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(orange, red); /* For Firefox 3.6 to 15 */
  background: linear-gradient(orange, red); /* Standard syntax */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Gradient Reverse on Click</button>

＆＃13;

:active更清洁，但有时它似乎陷入了焦点。我现在似乎无法重现这个问题，所以也许它已成为过去......

单击时更改按钮的颜色

4 个答案: