CSS：焦点不工作 [英] CSS :focus not working

问题描述

我尝试在我的项目中使用：focus CSS 伪类。我想改变单击它的元素的颜色。现在，当我点击我的元素更改颜色只有它处于活动状态，并在鼠标移动后返回到旧颜色。第二次点击后，我希望它回到旧的颜色。我使用Chrome。

演示 这里

<块;边框：1px纯灰色; height：200px;宽度：200px; line-height：1em;背景：灰色; margin：5px; opacity：0.1;}。row：active，.row：focus {background：orange;}

 < div id =mainclass =container> < div class =rowid =row0> < / div>< / div>  

解决方案

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

.row {display：inline-block;边框：1px纯灰色;高度：200像素;宽度：200px;行高：1em的;背景：灰色; margin：5px; opacity：0.1;}。row：active，.row：focus {background：orange; }

 < div id =mainclass = 
 


$ b

b


.row {display：

 < script src =https：// ajax .googleapis.com / AJAX /库/ jquery的/ 1.11.1 / jquery.min.js >< /脚本>< DIV ID = 主 类= 容器 >< DIV类= 行id =row0>< / div>< / div>  

I tried using :focus CSS pseudo-class in my project. I want to change the color of the element where I click on it. Now when I click my element change color only where it is active and after mouse up it return to old color. After second click I want it back to old color. I'm using Chrome.

Demo 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>

解决方案

If you want a real focus state to a div element, you can add a tabindex attribute to it.

.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>

If you want toggle the color with clicking the same div element, you have to use 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>

这篇关于CSS：焦点不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！