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

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

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

и это мой css

#mybox{
   background-color:green;
}

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

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

Заранее благодарим за помощь

Ответ 1

Без изменения разметки или с использованием JavaScript вам в значительной степени придется изменить цвет текста как упоминание knut или задать text-indent: -1000em;

IE6 не будет читать селектор: hover на чем-либо, кроме элемента привязки, поэтому вам нужно будет использовать что-то вроде IE7 Dean Edwards.

Действительно, вам лучше помещать текст в какой-то элемент (например, p или span или a) и устанавливать его на display: none; при наведении указателя мыши.

Ответ 2

Скрытие через CSS достигается с помощью атрибутов "видимости" или "отображения". Хотя оба достигают аналогичных результатов, полезно знать различия.

Если вы хотите скрыть элемент, но сохраните занятое им пространство, вы должны использовать:

#mybox:hover {
   visibility: hidden;
}

Если вы хотите скрыть элемент и удалить занимаемое им пространство, чтобы другие элементы могли занять его пространство, вы должны использовать:

#mybox:hover {
   display: none;
}

Также помните, что IE6 и ниже не отвечают на: hover для чего-либо, кроме тегов A. В этом случае вам понадобится Javascript для изменения имени класса:

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

и определите класс "hide" в CSS:

.hide { display: none; }

Ответ 3

Вы можете сделать цвет текста таким же, как цвет фона:


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

Ответ 4

звучит глупо, но font-size: 0; может просто работать. Это было для меня. И вы можете легко переопределить это с помощью дочернего элемента, который вам нужно показать.

Ответ 5

Вот простейший способ сделать это с помощью CSS3:

#mybox:hover {
  color: transparent;
}

независимо от цвета контейнера, вы можете сделать цвет текста прозрачным при наведении.

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

Ура!:)

Ответ 6

Лучший способ скрыть в html/css с помощью display:none;

Пример

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

Ответ 7

Это поздний ответ, но все же предположение о том, что цвет является прозрачным, является лучшим вариантом.

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

Ответ 8

Я бы сказал:

#mybox{
  background:green;  
}

#mybox:hover{
  color:transparent;
}

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

Ответ 9

Прошу прощения за 7 лет, но это может быть достигнуто при использовании ниже:

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

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

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

Ответ 10

Как насчет прозрачности

#mybox:hover {
    opacity: 0;
}

Ответ 11

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

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

Ответ 12

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