Ссылка (или ссылка на DIV?) С фоновым изображением + подсветка - PullRequest
Новая
       180

Ссылка (или ссылка на DIV?) С фоновым изображением + подсветка

1 голос
/ 15 августа 2011

Я вижу это в Facebook (также в Google), но не могу понять, как это сделать. Я сделал скриншот навигационной панели Facebook ниже,

enter image description here

Несколько вопросов,

  1. Не похоже, что это выделение только ссылки - то есть, не делая этого путем изменения только тега <a> - a:hover и т. Д. Весь элемент (вероятно, <li>) выделение - означает ли это, что весь элемент <li> является ссылкой? Или, может быть, они просто ставят много пробелов (например, &nbsp;) перед текстом ссылки? Похоже, они тоже этого не делают ... Как это сделать?

  2. Как сделать выделение и фоновое изображение? Похоже, цвет фона переопределяет фоновое изображение ...?

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

Спасибо миллион за ответы на мои вопросы новичка!

Ответы [ 2 ]

2 голосов
/ 15 августа 2011

Вы можете указать другой CSS для элемента <a href="#">LINK</a> при наведении курсора - это будет иметь эффект, как вы описали. ПРИМЕР ЖИВЫХ

например. 

a { background: #fff img1.png no-reapet left top; font-weight: normal}
a:hover { background: #000 img2.png no-reapet left top; font-weight: bold}

В этом примере мы изменили цвет фона, фоновое изображение и вес шрифта , когда элемент включен: hover.

Q1: Если у вас есть a href внутри li, и вы добавляете display:block к a href - a href, получится такой же большой, как и у li. Который может выглядеть как li a href

Кроме того, если вы добавите display:block к a href, он может служить контейнером для spans img em's etc.. элементов - создание одной большой ссылки, которая может выглядеть как div. например здесь у вас есть ссылка a href, которая содержит desc + img.

Q2: Когда вы указываете - фоновое изображение и цвет фона для одного и того же элемента - фоновое изображение всегда будет в ТОП.

Обратите внимание, что:

a { background-color: #fff; background-image: url(img1.png); background-repeat: no-repeat; background-position: top left}

совпадает с:

a { background: #fff url(img1.png) no-repeat top left}

Q3: Вы можете добавить класс к элементу, по которому щелкнули, через JS, чтобы остаться выделенным - но если вы не сохраните это значение в БД, оно будет потеряно при перезагрузке страницы.

Второй вариант заключается в том, что вы можете использовать javascript / jQuery для сопоставления URL ссылок с текущим URL и пометить соответствующий элемент ( см. Этот пример - jQuery).

0 голосов
/ 15 августа 2011

1) вот пример того, как вы можете достичь того, что вы ищете.

http://jsfiddle.net/UKna2/1/

CSS 

li:hover {
background-color: lightblue;
}

li a {
 display: block;
 width: 100%;  
}

HTML 

<ol>
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>    
</ol>

2) Все, что они, вероятно, делают, это устанавливают значок изображения для элемента списка вместо стандартной нумерации или маркированного списка. Читайте об этом: http://www.w3schools.com/cssref/pr_list-style-image.asp

...