CSS：焦点不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39741709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :focus not working
提问by DanteVoronoi
I tried using :focusCSSpseudo-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.
我尝试:focusCSS在我的项目中使用伪类。我想改变我点击它的元素的颜色。现在，当我单击我的元素时，只会在它处于活动状态的地方更改颜色，然后在鼠标抬起后它会返回旧颜色。第二次单击后，我希望它恢复旧颜色。我正在使用 Chrome。
Demohere
演示在这里
.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>回答by Andy Tschiersch
If you want a real focus state to a div element, you can add a tabindexattribute to it.
如果你想要一个真正的焦点状态到一个 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>If you want toggle the color with clicking the same div element, you have to use javascript (jQuery):
如果要通过单击相同的 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>回答by Vincent G
You can emulate the toggle effect with a CSS trick by adding a hidden checkbox input.
您可以通过添加隐藏的复选框输入来模拟使用 CSS 技巧的切换效果。
HTML :
HTML :
<div id="main" class="container">
<input type="checkbox" />
<div class="row" id="row0">
</div>
</div>
CSS :
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; }
回答by vishnu
.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>Please try this...
请试试这个...
回答by Rvervuurt
What you are looking for is :visited, but this doesn't work on a div. You should use the a-tag for it (including href="#").
您正在寻找的是:visited，但这不适用于 div。您应该a为它使用-tag（包括href="#"）。
.row:active, .row:visited { background: orange; }
Check the fiddle below:
检查下面的小提琴：
Edit: Vincent G's answer seems to do more what you want though, since you can remove the background color by clicking away.
编辑：Vincent G 的答案似乎可以做更多你想做的事，因为你可以通过点击来删除背景颜色。
