Попытка реализовать: hover On Nav Bar с пользовательскими изображениями

Question

Я борюсь с привязкой (в частности, тегом: hover) в CSS.Вот мой JSFiddle:

http://jsfiddle.net/yXwng/

В основном у меня есть панель навигации с пользовательским изображением (в скрипке я избавился от нее, потому что я просто пытаюсь понять синтаксис и строкувещи до).Панель навигации - это div, и у меня есть пять ссылок на панель навигации, которые являются вложенными.

Для того, чтобы сделать каждую из вложенных ссылок div (я сделал весь div ссылкой), я добавил прозрачный png в качестве фонового изображения и установил ссылку на фоновое изображение, таким образом, пользовательская панель навигацииИзображение по-прежнему отображается, и вы можете нажать на ссылку на панели навигации.

Теперь я пытаюсь создать изображение при наведении / наведении курсора для каждого элемента панели навигации.Когда я перемещаюсь, он показывает новое изображение, но выравнивается совершенно неправильно (вниз и вправо от того места, где было исходное изображение).На скрипке я использовал код, но вместо изображений, которые я использую, я просто использовал границы для выравнивания.Вы можете видеть на примере, что красное поле (которое является якорем) по какой-то причине не связано с div.Именно там появляется изображение при наведении курсора, когда я пытаюсь реализовать его.

Есть идеи?Спасибо!

Answer 1

Вам нужно задать блок дисплея и высоту строки для <a>, например:

#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}

Он будет выровнен с div. Кстати, вам нужно использовать структуру UL LI для этого.

Answer 2

если вы добавите в ссылку те же размеры, она должна отлично работать:

#homelink a{
    border:1px solid red;
    width: 200px;
    height: 40px;
    display:inline-block;
}