点击后 CSS 更改按钮样式

Question

我想知道是否有一种方法可以在单击按钮后在 css 中更改按钮的样式，所以不是

element:active

.

Answer 1

如果您正在寻找纯 css 选项，请尝试使用 :focus 伪类。

#style  {
    background-color: red;
}

#style:focus {     
    background-color:yellow;    
}

Answer 2

每个链接都有五种不同的状态：

link

、

hover

、

active

、

focus

和

visited

.

Link

是正常外观，

hover

是鼠标悬停时的状态，

active

是单击时的状态，

focus

跟随活动状态，

visited

是当您取消对最近单击的链接的关注时的状态.

我猜你想在

focus

或

visited

上实现不同的风格，那么你可以添加以下CSS：

a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }

在您的 CSS 中不造成任何麻烦的推荐顺序如下：

a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

您可以使用网络浏览器的开发人员工具来强制元素的状态，如下所示（Chrome->Developer Tools/Inspect Element->Style->Filter :hov）：

Answer 3

可以仅通过选择按钮的活动和焦点伪元素来使用 CSS。

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

参见代码笔：http://codepen.io/fennefoss/pen/Bpqdqx

您还可以编写一个简单的 jQuery 单击函数来更改背景颜色。

HTML：

<button class="js-click">Click me!</button>

CSS：

button {
  background: none;
}

JavaScript：

  $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });

查看此代码笔：http://codepen.io/fennefoss/pen/pRxrVG

Answer 4

尝试检查按钮焦点的轮廓：

button:focus {
    outline: blue auto 5px; 
}

如果你有它，只需将它设置为

none

.

Answer 5

你的按钮代码是什么？如果它是一个标签，那么你可以这样做：

a {
  padding: 5px;
  background: green;
}
a:visited {
  background: red;
}

<a href="#">A button</a>

或者你可以使用 jQuery 在点击时添加一个类，如下所示：

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});

.button-clicked {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>

Answer 6

如果你的按钮是一个

<a>

元素，你可以使用

:visited

选择器。

然而你是有限的，你只能改变：

颜色
背景色
边框颜色（及其子属性）
轮廓颜色
填充和描边属性的颜色部分

我还没有读过这篇关于重温

:visited

的文章，但也许一些更聪明的人已经找到了更多破解它的方法。

Answer 7

一个简单的方法是像这样使用 JavaScript：

element.addEventListener('click', (e => {
    e.preventDefault();

    element.style = '<insert CSS here as you would in a style attribute>';
}));

Answer 8

悬停，焦点，...的所有答案都是正确的如果你想在点击时改变背景颜色并保持点击状态，你可以这样做：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
  <script>
    const element = document.querySelector("body")
    let taskDone = false
   
    // function for show button
    const elementShow = () => {
      element.innerHTML = `
        <button id="done-button" style="background-color : ${!taskDone 
          ? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
          ${!taskDone ? "Done" : "not done yet"}
        </button>
        `
    }
    elementShow()

    // click Done button
    const doneTask = () => {
      taskDone = (taskDone ? false : true)
      elementShow()
    }
  </script>
</html>

Answer 9

你可以用 :focus 来做。

.button {
  border: 1px solid black;
}

.button:focus {
  border: 1px solid red;
}

点击后 CSS 更改按钮样式

问题描述投票：0回答：9

9个回答

最新问题

点击后 CSS 更改按钮样式

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9