Навигация по CSS: при наведении курсора на значок значок должен быть заменен текстовой ссылкой

Question

У меня есть значки, подобные этим на моем навигаторе (http://d.pr/i/NP2T). Когда я наводил курсор на один значок, я хочу, чтобы значок исчез, и появится текст ссылки для этого элемента списка (http://d.pr/i/Vd7i).

Вот мой HTML:

<div id="npnav"> 
    <ul> 
    <li class="current music"><a href="#">Music</a></li> 
    <li class="art"><a href="#">Art</a></li> 
    <li class="goods"><a href="#">Goods</a>/li> 
    <li class="blog"><a href="#">Blog</a></li> 
    </ul> 
</div> 

Вот мой CSS:

#npnav ul { 
list-style:none; 
padding-top:15px; 
} 

#npnav li { 
display:inline-block; 
padding:10px; 
text-decoration:none; 
font-weight:bold; 
max-width:60px; 
max-height:60px; 
} 

#npnav li a { 
visibility: hidden; 
} 

#npnav li a:hover { 
visibility: visible; 
} 


li.music {background:url('/images/headphone_icon.png') center center no-repeat; } 
li.music:hover {background:none;} 
li.art {background:url(img/nav-aboutHover.gif) center center no-repeat;} 
li.art:hover {background:none;} 
li.goods {background:url('/images/anchor_icon.png') center center no-repeat;} 
li.goods:hover {background:none;} 
li.blog:hover {background:url('/images/blog_icon.png') center center no-repeat;} 
li.blog:hover {background:none;} 

Я бы признателен за любую помощь в этом, так как я не мог найти какие-либо уроки делать замену парения с текстом , Благодарю.

Answer 1

Учитывая этот HTML:

<div id="npnav"> 
    <ul> 
    <li class="current music"><a href="#">Music</a></li> 
    <li class="art"><a href="#">Art</a></li> 
    <li class="goods"><a href="#">Goods</a>/li> 
    <li class="blog"><a href="#">Blog</a></li> 
    </ul> 
</div> 

И если предположить, что иконки фоновые изображения для li-х, Вы могли бы иметь этот CSS:

.current.music { background-image: url(someImageUrl); } 
.art { background-image: url(someImageUrl); } 
/* etc */ 

#npnav li a { 
    display: none; 
} 

#npnav li:hover { 
    background-image: none; 
} 

#npnav li:hover a { 
    display: inline; 
} 

Answer 2

Одним из вариантов было бы добавить дополнительный интервал внутри каждого <a>, дать ему требуемое фоновое изображение и разместить его абсолютно над текстом ссылки (ссылка установлена ​​на позицию: относительная). В режиме наведения установите положение положения пролета влево, чтобы переместить его с экрана.

Answer 3

Попробуйте изменить свой CSS-то вроде этого -

#npnav ul { 
    list-style:none; 
    padding-top:15px; 
} 

#npnav li { 
    display:inline-block; 
    padding:10px; 
    text-decoration:none; 
    font-weight:bold; 
    width:60px; 
    height:60px; 
} 

#npnav li a { 
    display:block;/*Ensure link covers the full space of the li */ 
    text-indent: -9000px; /*hide text away to the left */ 
    line-height:60px; 
} 

#npnav li a:hover { 
    text-indent: 0;/* Display the text on mouse over */ 
} 


li.music {background:url('/images/headphone_icon.png') center center no-repeat; } 
li.music:hover {background:none;} 
li.art {background:url(img/nav-aboutHover.gif) center center no-repeat;} 
li.art:hover {background:none;} 
li.goods {background:url('/images/anchor_icon.png') center center no-repeat;} 
li.goods:hover {background:none;} 
li.blog:hover {background:url('/images/blog_icon.png') center center no-repeat;} 
li.blog:hover {background:none;}