a: hover - использование изображений в текстовой навигации

Question

Я пытаюсь закодировать свою навигацию в моем портфолио и ищу более простой способ сделать это, чем использовать фоновое положение и спрайты css.

В основном мне нужна навигация, аналогичная навигации на этом сайте: http://www.ernesthemingwaycollection.com/, когда при наведении курсора на навигационную панель появляется полоса.

Есть ли более простой способ сделать это или мне нужно использовать фоновое позиционирование.

Кстати, я использовал текст в качестве навигации и предпочел бы сохранить его таким, а не использовать изображения для навигации. Я только хочу использовать изображения для наведения изображения. Я попытался сделать это просто с помощью следующего кода:

#nav a:hover {
background: url('Images/Nav_Hover.png') no-repeat;
}

Однако я не могу разместить изображение? Любая помощь?

Заранее спасибо!

Answer 1

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

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

a { background: url('image.jpg'); }
a:hover { background: url('image-hover.jpg'); }

Beпредупредил, что при наведении изображения при первой загрузке может быть небольшая задержка (для удаленных пользователей вы не заметите это локально без задержки) ... поэтому вы можете предварительно загрузить эти изображения при наведении.Это то, что спрайты по своей природе заботятся, поэтому не полностью не выбрасывайте их в качестве опции ... есть ресурсы, которые помогут создать их, если это проблема.

Answer 2

#nav a:hover { 
  background: url('Images/Nav_Hover.png') no-repeat 10px 20px; 
} 

Где 10px - горизонтальное положение, а 20px - вертикальное. Или просто используйте background-position, как упоминалось ранее.

Answer 3

Чтобы ответить на ваш вопрос, я думаю, что использование 1 изображения с нормальным и парящим в нем состоянием - это не только простой, но и самый лучший способ. Нет проблем с предварительной загрузкой / задержкой, нет проблем с браузером (кроме зависания, не работающего в ie6).

Спрайты для навигации довольно просты. Позиционирование Bia ***, когда вы используете его для всех изображений. Сделайте изображение при наведении на ширину самой широкой ссылки, и маленький CSS сделает все.

a.navLink { background:url(image) no-repeat; /* and ofcourse witdh and stuffs */ }
a.navlink:hover { background-position:0px -20px; /* height of button */ }

Не думаю, что это может быть проще ... Другой способ - использовать javacript, но я бы не стал этого делать при наведении.