Как создать горизонтальную навигацию в HTML / CSS над изображением?

Question

в моем заголовке у меня есть большое изображение. Над этим изображением я хочу разместить свою навигацию. Подсказка об этом: элемент ul-Navigation получил градиентный фон. Но если я наведу курсор мыши на li-Navigation-Link, я бы хотел отобразить основное изображение! (Надеюсь, это понятно? В противном случае я сделаю несколько фотошопов для демонстрации) Это должно быть гибким, то есть не давать каждому li-элементу специфический фрагмент из backgroundimage.

Я бы предпочел JS-решение вместо грязной разметки. Но я ценю все возможные идеи, которые у вас на уме. Может быть, я просто упускаю из виду наиболее очевидное и простое решение ..

С наилучшими пожеланиями (:

Вот изображение того, что я пытался описать. Надеюсь, поможет: http://s7.directupload.net/images/110226/pv4v4c5r.jpg

Answer 1

вы можете использовать background:transparent для a:hover.Это покажет фон.

(для Internet Explorer вы можете использовать filter:alpha(opacity=100));

Вот пример: http://jsfiddle.net/3C9sZ/2/

Answer 2

Я только что решил свою проблему с javascript / jquery.Его можно найти здесь http://jsfiddle.net/QwJKY/.

Answer 3

В JS нет необходимости делать это, просто сделайте так, чтобы при наведении указателя мыши на li-Navigation-Link элемент не устанавливал атрибут фона.

Это создаст 'прозрачность », которую вы хотите достичь.