CSS：焦点不工作

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

演示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>

来源

2016-09-28 DanteVoronoi

我不相信你可以关注的东西，这不是“交互元素”，即一个链接，输入，按钮或诸如此类。 –

：焦点仅在元素具有焦点时才进行;只要你把鼠标放在焦点上就会留下元素。 –

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

.row { 
 
\t 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 { 
 
\t 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>

来源

2016-09-28 08:22:32

谢谢，它的工作原理！ – DanteVoronoi

您可以通过添加一个隐藏的复选框，输入模拟与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; }

来源

2016-09-28 08:21:14

但如果我想要第二次点击后返回旧颜色，我该如何做到这一点？ – DanteVoronoi

你不能用CSS。你将不得不添加一个JS或jQuery监听器，它将根据当前类来切换一个类。 – Rvervuurt

@Rvervuurt你能举个例子吗？ – DanteVoronoi

你所寻找的是:visited，BU这不适用于div。您应该使用a -tag（包括href="#"）。

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

检查下面的小提琴：

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

编辑：文森特G公司的答案似乎做更多你想要什么，虽然，因为你可以马上点击删除背景颜色。

来源

2016-09-28 08:21:29 Rvervuurt

我忘了一个行为。第二次点击后，我想返回到旧颜色，在这种情况下'：visited'不起作用。 – DanteVoronoi

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

请试试这个...

来源

2016-09-28 08:53:02 Vishnu

CSS：焦点不工作

回答

相关问题