CSS：焦点不起作用答案

【问题标题】：CSS :focus not workingCSS：焦点不起作用
【发布时间】：2017-02-06 02:12:04
【问题描述】：

我尝试在我的项目中使用 :focus CSS 伪类。我想更改单击它的元素的颜色。现在，当我单击我的元素时，仅在它处于活动状态的地方更改颜色，鼠标向上后它会返回旧颜色。第二次单击后，我希望它恢复到旧颜色。我正在使用 Chrome。

演示 here

.row {
  display: inline-block;
  border: 1px solid grey;
  height: 200px;
  width: 200px;
  line-height: 1em;
  background: grey;
  margin: 5px;
  opacity: 0.1;
}
.row:active,
.row:focus {
  background: orange;
}

<div id="main" class="container">
  <div class="row" id="row0">
  </div>
</div>

【问题讨论】：

我不相信你可以专注于不是“交互元素”的东西，即链接、输入、按钮或类似的东西。
：只有当元素有焦点时，焦点才会继续；只要您将鼠标移开，焦点就会离开元素。

标签： css google-chrome pseudo-class

【解决方案1】：

您可以通过添加隐藏的复选框输入来使用 CSS 技巧来模拟切换效果。

See it here

HTML：

<div id="main" class="container">
  <input type="checkbox" />
  <div class="row" id="row0">
  </div>
</div>

CSS：

.container { position: relative; }
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; }
input:checked + .row { background: orange; }

【讨论】：

但是如果我想在第二次点击后返回旧颜色，我该怎么做呢？
你不能使用 CSS。您必须使用 JS 或 jQuery 添加一个侦听器，这将根据当前类切换一个类。
@Rvervuurt 你能举个例子吗？
@DanteVoronoi 我已经用 CSS 解决方案编辑了我的答案。但除此之外，您可以使用 javascript 以更“正确”的方式执行此操作。

【解决方案2】：

您要查找的是:visited，但这不适用于 div。您应该为它使用a-tag（包括href="#"）。

.row:active, .row:visited { background: orange; }

检查下面的小提琴：

http://jsfiddle.net/uuyNH/32/

编辑：Vincent G 的回答似乎更符合您的要求，因为您可以通过点击离开来移除背景颜色。

【讨论】：

我忘记了一种行为。第二次点击后，我想返回旧颜色，:visited 在这种情况下不起作用。

【解决方案3】：

如果你想要一个真正的 div 元素的焦点状态，你可以给它添加一个tabindex 属性。

.row {
	display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
   opacity: 0.1;
}

.row:active, .row:focus { background: orange; }

<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>

如果你想通过点击相同的 div 元素来切换颜色，你必须使用 javascript (jQuery)：

jQuery('#row0').click(function() {
  $(this).toggleClass('orange');
});

.row {
	display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
   opacity: 0.1;
}

.row.orange { background: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>

【讨论】：

【解决方案4】：

.row {
  display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
  opacity: 0.1;
}

.row:active, .row:focus { background: orange; opacity:1 }

<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>

请试试这个...

【讨论】：

【解决方案5】：

按照 Andy Tschiersch 的回答，我建议使用 tabindex = "0"（这是它的默认值）而不是 tabindex = "1"。

见：https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex

<div id="main" class="container">
  <div class="row" id="row0" tabindex="0" >
  </div>
</div>

【讨论】：