如何隱藏的div在CSS

內容我有這樣的HTML代碼如何隱藏的div在CSS

<div id="mybox"> aaaaaaa </div>

，這是我的CSS

#mybox{ 
    background-color:green; 
} 

#mybox:hover{ 
    background-color:red; 
}

的問題是如何隱藏div的內容（AAAAAAA ）當鼠標懸停事件通過使用CSS而不改變代碼的結構我想我應該把一些代碼放在但我不知道代碼

謝謝提前幫助

來源

2009-04-21 ahmed

語義，你真的會最好關閉使用DIV內的段落或其他元素。 div是一個結構元素，並不是爲了直接保存文本。 – 2009-04-21 23:18:09

這是一個難以堅持的語義。誰在這件事上沒有罪？ – 2014-11-15 23:14:56

不改變標記或使用JavaScript，你幾乎不得不改變文本顏色爲knut提到，或設置文本縮進：-1000em;

IE6不會讀取：錨定元素以外的其他任何東西的懸停選擇器，因此您將不得不使用類似Dean Edwards' IE7之類的東西。

真的不過，你最好把文本中某種元素（如p或span或a）和設置，爲display: none;懸停。

來源

2009-04-21 23:16:57

謝謝，text-indent：-1000em;工作得很好，我想我會使用它，關於IE6只是我不支持它，因爲它會導致非常複雜的代碼，謝謝 – ahmed 2009-04-21 23:23:05

你可以做文字顏色一樣的背景色：


#mybox:hover 
{ 
    background-color: red; 
    color: red; 
}

來源

2009-04-21 23:13:06 knut

這是一個很好的伎倆，但它不會幫助我的情況，因爲我想在我的div中使用背景圖像，謝謝 – ahmed 2009-04-21 23:14:48

你可以添加一個背景圖像懸停與background-image：url（...）no-repeat left top，例如 – 2009-04-21 23:17:51

最棘手的方法:) – M98 2016-07-26 10:14:32

-1

#mybox:hover { display: none; } 
#mybox:hover { visibility: hidden; } 
#mybox:hover { background: none; } 
#mybox:hover { color: green; }

但應當注意的是，IE6及以下不會聽懸停時，它不是在一個一個標籤。爲此，您必須合併JavaScript以在懸停期間向div中添加一個類。

來源

2009-04-21 23:13:37

謝謝，我不打算在我的項目的這個階段支持IE6，謝謝 – ahmed 2009-04-21 23:24:02

CSS隱藏是通過使用「可見性」或「顯示」屬性來實現的。雖然兩者都取得了相似的結果，但瞭解其差異很有用。

如果你只想隱藏元素，但保留其所佔用的空間，你應該使用：

#mybox:hover { 
    visibility: hidden; 
}

如果你想隱藏的元素，並刪除其所佔用的空間，讓其他元素可以利用它的空間，那麼你應該使用：

#mybox:hover { 
    display: none; 
}

還記得IE6及以下不迴應：徘徊除A標籤的東西。在這種情況下，你需要一些JavaScript來更改類名：

document.getElementById('mybox').className = 'hide';

，並定義了「隱藏」類CSS：

.hide { display: none; }

來源

2009-04-21 23:22:50 Pras

聽起來很愚蠢，但字體大小：0;可能只是工作。它爲我做了。你可以輕鬆地用你需要顯示的子元素覆蓋它。

來源

2013-01-25 04:08:52 Jack

最好的方法使用display:none;

例

<div id="divSample" class="hideClass">hi..</div> 
<style> 
.hideClass 
{display:none;} 
</style>

來源

2013-08-20 05:33:56

這是一個遲到的回答，但仍，猜顏色設置爲透明是最好的選擇在HTML/CSS隱藏。

#mybox:hover{ 
background-color:red; 
}

來源

2016-03-26 04:27:01 user3782177

我會說：

#mybox{ 
 
    background:green; 
 
} 
 

 
#mybox:hover{ 
 
    color:transparent; 
 
}

<div id="mybox"> 
 
    This text will disappear on hover 
 
</div>

這將隱藏的文本，但當然，它仍然包含了文本，但它是隱藏的文本取巧的方法（使其無效），但它會工作得很好

來源

2016-07-26 10:20:33 M98

對不起，遲到7年，但這可以通過使用以下內容來實現：

.your-block{ 
    visibility: hidden; 
    width: 0px; 
    height: 0px; 
}

這將保持頁面上的內容，不會佔用任何空間，而display：none將完全隱藏內容。

如果您需要在div中引用代碼，但不需要顯示它，那麼使用上面的代碼會很有用。

來源

2016-11-10 16:16:55

這裏是CSS3做最簡單的方法：

#mybox:hover { 
    color: transparent; 
}

，不管容器的顏色，你可以懸停文本顏色透明的。

http://caniuse.com/#feat=css3-colors

乾杯！ :)

來源

2017-01-10 13:27:33 stamat

-1

.button { 
 
     width: 40px; 
 
     height: 40px; 
 
     font-size: 0; 
 
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%221284%20207%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1298.5%20222.9C1297.5%20223.6%201296.3%20224%201295%20224%201291.7%20224%201289%20221.3%201289%20218%201289%20214.7%201291.7%20212%201295%20212%201298.3%20212%201301%20214.7%201301%20218%201301%20219.3%201300.6%20220.5%201299.9%20221.5L1302.7%20224.2C1303%20224.6%201303.1%20225.3%201302.7%20225.7%201302.3%20226%201301.6%20226%201301.2%20225.7L1298.5%20222.9ZM1295%20222C1297.2%20222%201299%20220.2%201299%20218%201299%20215.8%201297.2%20214%201295%20214%201292.8%20214%201291%20215.8%201291%20218%201291%20220.2%201292.8%20222%201295%20222Z%22%20fill%3D%22%239299A6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") #f0f2f5 no-repeat 50%; 
 
    }

<button class="button">Поиск</button>

來源

2017-03-30 22:59:04

什麼不透明

#mybox:hover { 
    opacity: 0; 
}

來源

2017-09-02 21:12:01 OdkoPP

有很多方法可以做到這一點：
方式一：

#mybox:hover { 
    display:none; 
}

另一種方式：

#mybox:hover { 
    visibility: hidden; 
}

或者你可以只是做：

#mybox:hover { 
    background:transparent; 
    color:transparent; 
}

來源

2018-03-10 22:48:03 Cursor

如何隱藏的div在CSS

回答

相關問題