Как сделать текст скрытым при наведении

Я создаю меню, в котором каждый элемент имеет текст, а при наведении курсора электронная почта заменяет. Вот и не знаю как убрать текст при наведении.

вот мой код до сих пор:

#home {
    font: 30px 'LeagueGothicRegular', Arial, sans-serif;
    color: #f9f8cc;
}

#home:hover {
    background:url(style/images/icon/home.png) #FFF;
    background-size: 83px 56px;
}

css visibility font-size hidden
person Alex Jj    schedule 03.06.2013    source источник
comment
Можете ли вы настроить упрощенную демонстрацию на jsfiddle?   -  person Jason Yaraghi    schedule 03.06.2013

Ответы (4)


arrow_upward
9
arrow_downward

Вы не можете удалить текст с помощью css, но вы можете сделать текст невидимым, установив его цвет прозрачным, чтобы ваш css был:

#home:hover {
   color: transparent;
   background:url(style/images/icon/home.png) #FFF; 
   background-size: 83px 56px; 
}

Если у вас есть проблемы с макетом с этим решением, вы также можете обернуть текст еще одним div, а затем при :hover установить отображение div на none:

CSS

#home:hover .yourDivClassThatContainsText {
   display: none;
}

HTML

<div id="home">
   <div class="yourDivClassThatContainsText">
      Text Text TExt
   </div>
</div>
person bpoiss    schedule 03.06.2013

arrow_upward
3
arrow_downward

вы можете установить цвет: на прозрачный на :hover

person G-Cyrillus    schedule 03.06.2013
comment
это должен быть комментарий, а не ОТВЕТ - person underscore; 03.06.2013
comment
?? спасибо, что приветствовали меня здесь, и ЭТО РЕШЕНИЕ, ОТВЕЧАЮЩЕЕ НА ВОПРОС - person G-Cyrillus; 03.06.2013

arrow_upward
1
arrow_downward

Если кто-то ищет другой и гораздо более простой подход, просто добавьте это в свой CSS-контейнер hover:

шрифт: 0/0 а;

Подробнее о сокращенном свойстве шрифта можно узнать здесь: Еще один метод замены изображений в CSS

person nerdrocker    schedule 25.08.2014

arrow_upward
1
arrow_downward

Вы также можете использовать непрозрачность, и вот как:

Html

 <div id="home">
   <div class="yourDivClassThatContainsText">
      Text Text TExt
   </div>
</div>

CSS

.yourDivClassThatContainsText{opacity:1;}
.yourDivClassThatContainsText:hover{opacity:0;}

Чтобы сделать его действительно красивым, добавьте этот класс .transition в тот же div, где находится yourDivClassThatContainsText, вот класс перехода:

.transition{-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}

Спасибо надеюсь помог

person Ste Mappo    schedule 29.03.2017