как скрыть содержимое div в css

Question

У меня есть этот HTML-код

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

а это мой css

#mybox{
   background-color:green;
}

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

вопрос в том, как скрыть содержимое div (aaaaaaa) при событии наведения мыши, используя только CSS и не меняя структуру кода Я думаю, что я должен поместить код под #mybox:hover, но я не знаю код

Заранее спасибо за помощь

Answer 1

Извините, что опоздал на 7 лет, но этого можно достичь с помощью следующего:

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

Это сохранит содержимое на странице и не будет занимать никакого пространства, тогда как отображение: ни одно не будет полностью скрывать содержимое.

Использование приведенного выше кода может быть полезно, если вам нужно ссылаться на код в div, но не нужно его отображать.

Answer 2

Я бы сказал:

#mybox{
  background:green;  
}

#mybox:hover{
  color:transparent;
}

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

Это будет скрывать текст, но, конечно, он по-прежнему содержит текст, но это хитрый способ скрыть текст (сделать невидимым), но он будет хорошо работать

Answer 3

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

хотя следует отметить, что IE6 и ниже не будут слушать hover, когда он не находится на теге A. Для этого вам нужно включить JavaScript для добавления класса в div во время наведения.