CSS隱藏/顯示效果適用於Firefox，但不適用於Chrome/Safari

我正在處理CSS隱藏/顯示效果。它在Firefox上正常工作。你點擊它，出現Hello World文字。然後再次點擊，消失。CSS隱藏/顯示效果適用於Firefox，但不適用於Chrome/Safari

但在Chrome/Safari上，您必須點擊並按住按鈕才能使其顯示。

我該如何使它在Chrome/Safari上正常工作，就像它在Firefox上一樣？

HTML：

<div class="formatting_show" id="formatting_show"></div> 

<span id="formatting_content"> Hello World </span>

CSS：

#formatting_show { 
    cursor: pointer; 
    cursor: hand; 
    float: right; 
    font-size: 30px; 
    height: 15px; 
    text-align: right; 
    width: 74px; 
    color: #000; 
} 

#formatting_content { 
    display: block; 
    -webkit-transition: opacity 1s ease-out; 
    transition: opacity 1s ease-out; 
    opacity: 0; 
    height: 0; 
    font-size: 0; 
    overflow: hidden; 
} 
#formatting_show:before { 
    content: "Formatting «" 
} 
#formatting_show:active.formatting_show:before { 
    content: "Formatting »" 
} 
#formatting_show:active ~ span#formatting_content { 
    font-size: 30px; 
    height: 70px; 
    opacity: 1; 
} 

#formatting_content { 
    float: left; 
}

來源

2014-10-30 Henrik Petterson

我猜''active'在不同的瀏覽器中的實現方式不同 – Huangism 2014-10-30 18:21:16

@Huangism你知道如何調整它以使其工作普遍嗎？如果你這樣做，請提供一個小提琴進行測試。 – 2014-10-30 18:24:56

我會使用js來處理這種點擊行爲，在webkit瀏覽器中，只有在項目上按住鼠標按鈕時纔會添加活動狀態。我不認爲這是可行的使用css – Huangism 2014-10-30 18:29:17

我同意@Huangism誰在評論中寫道，這是不可能的:active僞類。但是，您可以使用HTML複選框,標籤用於該複選框，而general sibling selector用於CSS（see also）。

這是所有的HTML代碼：

<input id="formatting_show" type="checkbox" /> 
<label for="formatting_show">Formatting</label> 

<div class="formatting_content">Hello World</div>

以及完整的CSS代碼：

#formatting_show { 
    display: none; 
} 
.formatting_content { 
    display: none; 
} 
#formatting_show:checked ~ .formatting_content { 
    display: block; 
}

你可以看看a running example。

來源

2014-10-30 19:03:03 rosetree

好主意！您可以使用'display：none;'或'visibility：hidden;'來隱藏它，而不是將複選框移出視口。 – 2014-10-30 19:31:41

這很好，謝謝。 – 2014-10-31 16:10:51

@Jay，謝謝你的建議;我已經更新了我的答案。 Henrik我很高興你喜歡它！ – rosetree 2014-10-31 16:25:02

CSS隱藏/顯示效果適用於Firefox，但不適用於Chrome/Safari

回答

相關問題