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：焦點不工作

回答

相關問題