как скрыть содержимое 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

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

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

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

Answer 2

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

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

#mybox:hover {
   visibility: hidden;
}

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

#mybox:hover {
   display: none;
}

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

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

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

.hide { display: none; }

Answer 3

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

#mybox:hover {
  color: transparent;
}

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

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

Ура! :)

Answer 4

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

Answer 5

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

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

Answer 6

Есть много способов сделать это:
В одну сторону:

#mybox:hover {
   display:none;
}

Другой способ:

#mybox:hover {
   visibility: hidden;
}

Или вы могли бы просто сделать:

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

Answer 7

Это поздний ответ, но все же, думаю, установка прозрачного цвета - лучший вариант.

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

Answer 8

Лучший способ скрыть в html / css, используя display:none;

Пример

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

Answer 9

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

#mybox:hover {
    opacity: 0;
}

Answer 10

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