Динамически изменяющийся маркер в списках

UNIX · February 4, 2009

Доброго времени суток, господа! Собственно по сабжу: можно ли сделать нечто подобное средствами CSS? Немного уточню: хотелось бы, что бы при наведении курсора на элемент списка, появлялся маркер, когда курсор уходит - маркер исчезает (примерно, как на qip.ru в главном меню). Хотелось бы обойтись БЕЗ js.

SelenIT · February 4, 2009

Можно, см. псевдокласс :hover. Правда, в IE6 это работает только для ссылок...

rash · February 4, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Document Title</title>
	<style type="text/css" media="screen">
		ul {
			list-style-type: none;
			}
		ul li a .bullet{
			display: none;
			}
		ul li a:hover .bullet {
			display: inline;
			margin-left: -1.24em;
			}
	</style>
</head>
<body>
<ul>
	<li><a href="#"><span class="bullet">— </span>Пункт 1</a></li>
	<li><a href="#"><span class="bullet">— </span>Пункт 1</a></li>
	<li><a href="#"><span class="bullet">— </span>Пункт 1</a></li>
	<li><a href="#"><span class="bullet">— </span>Пункт 1</a></li>
	<li><a href="#"><span class="bullet">— </span>Пункт 1</a></li>
	<li><a href="#"><span class="bullet">— </span>Пункт 1</a></li>
</ul>
</body>
</html>

Как-то так?

P.S: ну добавьте для HTML и SQL сохранение форматирования в стилях…

Koriolan · February 4, 2009

А если в эту часть добавить свойство, описывающее внешний вид самого маркера в виде ссылки на графический файл (list-style-image:url(адрес/имя_файла.jpg) и убрать подчеркивание, то будет совсем красиво

}
ul li a:hover .bullet {
display: inline;
margin-left: -1.24em;
}

Особого, правда, внимания заслуживает display: inline; - этот параметр не всегда адекватно воспринимается разными браузерами. Сам, было на этом много времени убил. Особенно, помнится, с ним не дружат IE6 и Mozilla, хотя, может сейчас эта проблема уже не так и актуальна.

P.S. Иногда с подобными конструкциями не дружит Google Chrome (имею ввиду, когда вместо стандартного маркера используется картинка. Сей браузер, как я понял, вообще не очень-то охотно приветствует ссылки на изображения в каскадных таблицах стилей. Скажем, через CSS сделать некое подобие ролловера для него у меня так и не получилось )

rash · February 4, 2009

Можно и так, с графическим маркером, но текстовые маркеры для списков подходят лучше (если это не рекламная листовка), а с генерированным контентом, как известно, дела еще хуже, чем с inline;

Впрочем, вместо display: none/inline можно и visibility: hidden поставить.

Koriolan · February 4, 2009

но текстовые маркеры для списков подходят лучше (если это не рекламная листовка)

Согласен! Мне почему-то показалось (хотя, перечитав пост, вижу, что оснований для этого небыло), что речь идет о списке в меню Вот и погнался за красивостями.

Sign In

Динамически изменяющийся маркер в списках

Question

UNIX

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Koriolan

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Koriolan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information