CODEWITHSUNDEEP
cssvisibilityhiddenfont-size
Alex Jj
Alex Jj

Reputation: 1393

How to make the text hidden in hover

I am creating a menu that each item has a text and in hover an email replaces. So I do not know how to remove the text in hover.

here is my code so far:

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

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

Upvotes: 3

Views: 27724

Answers (4)

Ste Mappo
Ste Mappo

Reputation: 19

You can also use opacity and this is how:

Html

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

CSS

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

To make it really nice add this .transition class to the same div where yourDivClassThatContainsText is here is the transition class:

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

Thanks hope I helped

Upvotes: 1

nerdrocker
nerdrocker

Reputation: 81

If someone is looking for another and a much simpler approach, simply add this to your CSS hover container:

font: 0/0 a;

More information about the font shorthand property here: Another CSS image replacement technique

Upvotes: 1

bpoiss
bpoiss

Reputation: 14023

You can not remove the text with css, but you can make the text invisible, by setting its color to transparent, so your css would be:

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

If you have layout problems with this solution, you could also wrap another div around the text, and then on :hover set the display of the div to none:

CSS

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

HTML

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

Upvotes: 10

G-Cyrillus
G-Cyrillus

Reputation: 106048

you may set color: to transparent on :hover

Upvotes: 4

Related Questions