twitter-bootstrap - 关于设置 Bootstrap 事件按钮背景颜色的问题

标签 twitter-bootstrap css twitter-bootstrap-3

你能看看this demo吗?让我知道为什么我没有在 bootstrap 3 中为按钮的事件状态设置背景颜色?我期望的是在单击后将背景颜色设置为红色,直到鼠标悬停在按钮上,但一旦鼠标离开,它就会再次变为透明!

谢谢

.btn-sample
 {
  text-shadow: none;
  color: white;
  background:transparent;
  border:2px solid red;
  color:red;
}
.btn-sample:hover
 {
  text-shadow: none;
  color: white;
  background:red;
}
.btn-sample:active {
  box-shadow: none;
  background-color: red;
}
.btn-sample.active {
   background-color: red;
}
.btn-sample:active:focus {
  color: #ffffff; 
  background-color: red; 
}
.btn-sample.active:focus{
     background-color: red;
   }
.btn-sample:active:focus{
      background-color: red;
   }

最佳答案

当您单击按钮时,Bootstrap 不会自动附加 active 类。你需要一点 jQuery(或者你可以使用 javascript)来为你做这件事。

试试这个:

$('.btn-sample').click(function() {
  $(this).toggleClass('active');
});

Updated your link here

关于twitter-bootstrap - 关于设置 Bootstrap 事件按钮背景颜色的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35278675/

相关文章:

css - "inline-flex"元素在 Internet Explorer 中不随其内容增长

javascript - 如何在 Bootstrap 3 中制作 3 行导航栏

html - 使用 bootstrap 3 垂直对齐输入

jquery - 如何正确初始化 Bootstrap 弹出窗口和工具提示

javascript - 在我的模板中包含 Angular 后,选项卡无法正常工作

javascript - 当容器有右滚动条时,Flex 元素宽度不能在 IE11 中工作

css - 如何更改我的 GWT 列表框样式

html - 如何创建一个从下面溢出的文本div

css - react Bootstrap 表未对齐的标题列

javascript - 如何在激活时将图像更改为单独的图像?