Question

我希望课程在选中后显示不同的颜色。为什么它会回到非active颜色？我能做些什么才能让它专注于我的课程？

我在这个论坛上尝试过很多东西，但似乎没什么用。我很快就需要上学。

＆＃13;

.Auswahl {
  outline: none;
  background-color: #F6F6F6;
  border: none;
  margin-right: -4px;
  float: left;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.Auswahl:hover {
  background-color: #FF0004;
}
.Auswahl:active {
  background-color: #00FF2B;
}
.Auswahl:focus {
  background-color: #7100FF;
}

＆＃13;

<div class="Auswahl">
  <h1>Sparkasse</h1>
  <br>Vorteile
  <br>Nachteile
</div>

＆＃13;

Answer 1

：当一个元素具有焦点时，应用focus伪类（接受键盘事件或其他形式的文本输入）。

更多信息 here

像这样更改HTML：

＆＃13;

.Auswahl {
  outline: none;
  background-color: #F6F6F6;
  border: none;
  margin-right: -4px;
  float: left;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.Auswahl:hover {
  background-color: #FF0004;
}
.Auswahl:focus {
  background-color: #7100FF;
}
.Auswahl:active {
  background-color: #00FF2B;
}

＆＃13;

<button class="Auswahl">
  <h1>Sparkasse</h1>
  <br>Vorteile
  <br>Nachteile
</button>

＆＃13;

Answer 2

试试这个。它有一个非常少量的jQuery来添加一个新的类点击。

<强> HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<div class="Auswahl">
    <h1>Sparkasse</h1>
    <br>Vorteile
    <br>Nachteile
</div>

<强> CSS

.Auswahl {
  outline: none;
  background-color: #F6F6F6;
  border: none;
  margin-right: -4px;
  float: left;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.Auswahl:hover {
  background-color: #FF0004;
}
.Auswahl:active {
  background-color: #00FF2B;
}
.Auswahl:focus {
  background-color: #7100FF;
}

.newClass {
  background-color: #7100FF;
}

<强> JQUERY

$(".Auswahl").click(function(){
    $(this).addClass('newClass');
});

这里也是Codepen示例：EXAMPLE HERE

：专注于课堂不起作用

2 个答案: