Как да направите текста скрит при задържане

Създавам меню, в което всеки елемент има текст и при задържане на мишката се замества имейл. Така че не знам как да премахна текста при задържане.

ето моят код досега:

#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 a;

Повече информация относно свойството за стенограма на шрифта тук: Друга CSS техника за заместване на изображения

person nerdrocker    schedule 25.08.2014

arrow_upward
1
arrow_downward

Можете също да използвате opacity и това е как:

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