18.07.2019, 02:34 [+3 UTC]
в нашей команде: 3 747 чел. | участники онлайн: 2 (рекорд: 21)

:: РЕГИСТРАЦИЯ

задать вопрос

все разделы

правила

новости

участники

доска почёта

форум

блоги

поиск

статистика

наш журнал

наши встречи

наша галерея

отзывы о нас

поддержка

руководство

Версия системы:
7.77 (31.05.2019)
JS-v.1.34 | CSS-v.3.35

Общие новости:
28.04.2019, 09:13

Форум:
05.07.2019, 10:35

Последний вопрос:
17.07.2019, 20:23
Всего: 149931

Последний ответ:
17.07.2019, 11:40
Всего: 258703

Последняя рассылка:
17.07.2019, 22:15

Писем в очереди:
0

Мы в соцсетях:

Наша кнопка:

RFpro.ru - здесь вам помогут!

Отзывы о нас:
25.05.2011, 13:49 »
lamed
Блестящая работа! Большое спасибо. Удачи smile [вопрос № 183184, ответ № 267368]
13.03.2014, 11:55 »
Бронников Александр
Очень подробный ответ, написанный нормальным языком ! [вопрос № 187782, ответ № 272701]
13.07.2010, 10:07 »
Dimon4ik
То, что надо! Спасибо smile [вопрос № 179472, ответ № 262511]

РАЗДЕЛ • HTML / DHTML / XML / CSS

Создание программ на языках HTML, DHTML, XML и каскадные таблицы стилей CSS.

[администратор рассылки: Коцюрбенко Алексей Владимирович (Модератор)]

Лучшие эксперты в этом разделе

solowey
Статус: Практикант
Рейтинг: 205
Коцюрбенко Алексей Владимирович
Статус: Модератор
Рейтинг: 142
Азимджон
Статус: 5-й класс
Рейтинг: 122

Перейти к консультации №:
 

Консультация онлайн # 142395
Раздел: • HTML / DHTML / XML / CSS
Автор вопроса: ualife
Отправлена: 27.08.2008, 14:34
Поступило ответов: 0

Здравствуйте, уважаемые эксперты. Не могу разобраться с CSS.
Мне нужно, чтобы при наведении курсора на ссылку у элементов ul изменялся параметр visibility.
Вот есть такая страница:

<style type="text/css">
a:hover{color:#F0F}
ul{visibility:hidden}
</style>
<a href='#'>test</a>
<ul><li>1</li><li>2</li></ul>

Что нужно дописать?
Есть страничка с выпадающим меню, но я не могу разобраться.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssMenu by ice-w-ind</title>

<style type="text/css">
.cssMenu {
	width:745px;
	height:32px;
	font-size:0.85em;
	position:relative; /* когда значения left и top задаются относительно текста, за которым следует элемент */
	z-index:100;
	border-right:1px solid #000000;
	}
* html .cssMenu { /* А вот здесь первый hack для IE 5.5 чтоб корректно отобразить размер */
	width:746px;
	w\idth:745px;
	}
.cssMenu ul { /* Теперь уберем все отступы и точки в начале пунктов меню */
	padding:0;
	margin:0;
	list-style-type:none;
	}
.cssMenu li { /* Указываем элементам нашего списка относительую позицию и вертикальную организацию */
	float:left;
	width:149px;
	position:relative;
	}

.cssMenu a, .cssMenu a:visited { /* Здесь задаем стиль для элементов высшего уровня */
	display:block;
	font-size:11px;
	text-decoration:none;
	color:#000000;
	width:138px;
	height:30px;
	border:1px solid #000;
	border-width:1px 0 1px 1px;
	background:#ebe9ed;
	padding-left:10px;
	line-height:29px;
	}
* html .cssMenu a, * html .cssMenu a:visited { /* Еще один hack для корректного отображения IE 5.5 элементов меню */
	width:149px;
	w\idth:138px;
	}
.cssMenu ul ul a.list, .cssMenu ul ul a.list:visited { /* Указываем заний фон для элементов второго уровня из которых будут выпадать другие разделы */
	background:#CCCCCC url(li.gif) center right no-repeat;
	}
.cssMenu ul ul a.list:hover{ /* Теперь как будут выглядеть элементы второго уровня при наведении курсора */
	background:#999999 url(li.gif) center right no-repeat;
	}
.cssMenu ul ul :hover > a.list { /* И здесь для других броузеров */ 
	background:#999999 url(li.gif) center right no-repeat;
	}
.cssMenu ul ul ul a, .cssMenu ul ul ul a:visited{ /* Теперь для элементов меню третьего уровня */
	background:#CCCCCC;
	}
.cssMenu ul ul ul a:hover { /* Как будут выглядеть элементы третьего уровня при наведении курсора */
	background:#999999;
	}
.cssMenu ul ul { /* Теперь присваиваем выпадающим элементам абсолютную позицию и прячем их */
	visibility:hidden;
	position:absolute;
	height:0;
	top:31px;
	left:0;
	width:149px;
	border-top:1px solid #000;
	}
* html .cssMenu ul ul { /* И еще один hack для 5й версии */
	top:30px;
	t\op:31px;
	}
.cssMenu ul ul ul{ /* Позиция элементов третьего уровня */
	left:149px;
	top:-1px;
	width:149px;
	}
.cssMenu ul ul ul.left { /* А здесь позиция элементов третьего уровня для выпадания в левую сторону */
	left:-149px;
	}
.cssMenu table { /* Здесь указываем свойства таблицы. Необходимо для IE */
	position:absolute;
	top:0;
	left:0;
	border-collapse:collapse;
	}
.cssMenu ul ul a, .cssMenu ul ul a:visited { /* Свойства элементов <a> второго уровня */
	background:#ebe9ed;
	color:#000;
	height:auto;
	line-height:1em;
	padding:5px 10px;
	width:128px;
	border-width:0 1px 1px 1px;
	}
* html .cssMenu ul ul a, * html .cssMenu ul ul a:visited { /* И еще один hack для IE 5.5 */
	width:150px;
	w\idth:128px;
	}

/* Теперь определим свойства элементов, на которые наведен курсор */

.cssMenu a:hover, .cssMenu ul ul a:hover{ /* Элементы высшего уровня */
	color:#000000;
	background:#CCCCCC;
	}
.cssMenu :hover > a, .cssMenu ul ul :hover > a { /* Для остальных броузеров */
	color:#fff;background:#CCCCCC;
	}
.cssMenu ul li:hover ul, .cssMenu ul a:hover ul{ /* Показываем элементы второго уровня если навели на первый */
	visibility:visible;
	}
.cssMenu ul :hover ul ul{ /* Оставляем третий уровень невидимым */ 
	visibility:hidden;
	}
.cssMenu ul :hover ul :hover ul{ /* И теперь показываем элементы третьего уровня при наведении на соотвествующий пункт второго */
	visibility:visible;
	}

</style>

</head>

<body>
<div class="cssMenu">
<ul>
	<li><a href="../content/articles.php">Статьи
        <!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        <li><a href="../content/articles.php?mod=add">Добавить статью</a></li>
        <li><a href="../content/articles.php?mod=new">Показать новые</a></li>
        <li><a href="../content/articles.php?mod=all" class="list">Показать все<!--[if IE 7]><!--></a><!--<![endif]-->
	      <!--[if lte IE 6]><table><tr><td><![endif]-->
        	<ul>
            <li><a href="../content/articles.php?mod=all&sortby=date">Сортировать по дате</a></li>
            <li><a href="../content/articles.php?mod=all&sortby=size">Сортировать по размеру</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>        	
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="../content/downloads.php">Файлы<!--[if IE 7]><!--></a><!--<![endif]-->
	    <!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        <li><a href="../content/downloads.php?mod=toprated">Самые популярные</a></li>
        <li><a href="../content/downloads.php?mod=recent">Самые новые</a></li>
        <li><a href="../content/articles.php?mod=all" class="list">Показать все<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
        	<ul>
            <li><a href="../content/downloads.php?mod=all&sortby=date">Сортировать по дате</a></li>
            <li><a href="../content/downloads.php?mod=all&sortby=size">Сортировать по размеру</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="http://forum.mysite.ru">Форум</a></li>
    <li><a href="../content/contacts.php">Контакты<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul>
        <li><a href="../content/contacts.php?mod=emailus">Написать нам</a></li>
        <li><a href="../content/contacts.php?mod=managers" class="list">Наши менеджеры<!--[if IE 7]><!--></a><!--<![endif]-->
		    <!--[if lte IE 6]><table><tr><td><![endif]-->
        	<ul>
            <li><a href="../content/contacts.php?mod=managers&show=top">Директор</a></li>
            <li><a href="../content/contacts.php?mod=managers&show=sell">Менеджер по продажам</a></li>
            <li><a href="../content/contacts.php?mod=managers&show=empl">По работе с персоналом</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="../content/login.php">Мой аккаунт</a></li>
</ul>
</div>


<p> </p>
</body>
</html>

Большое Вам Спасибо!

Состояние: Консультация закрыта

Oтветов пока не поступило.

Мини-форум консультации № 142395
Иван Сергеевич

# 1

= общий = | 27.08.2008, 14:52

.cssMenu ul li:hover ul, .cssMenu ul a:hover ul{ /* Показываем элементы второго уровня если навели на первый */
	visibility:visible;
	}
.cssMenu ul :hover ul ul{ /* Оставляем третий уровень невидимым */ 
	visibility:hidden;
	}
.cssMenu ul :hover ul :hover ul{ /* И теперь показываем элементы третьего уровня при наведении на соотвествующий пункт второго */
	visibility:visible;
	}


Тут как раз стили для видимости объектов 2 и 3 уровня в случае наведения мышки на 1 и 2 уровень меню соответственно

Ualife

# 2

= общий = | 27.08.2008, 15:01

Я же говорю: не могу разорбаться, как применить это к странице:

<style type="text/css">
a:hover{color:#F0F}
ul{visibility:hidden}
</style>
<a href='#'>test</a>
<ul><li>1</li><li>2</li></ul>

Я в CSS - новичок

Иван Сергеевич

# 3

= общий = | 27.08.2008, 15:31

Список первого уровня "обертывается" в DIV с классом "cssMenu".
Все названия пунктов в списках должны быть заключены в ссылки.
Только уберите стиль ul{visibility:hidden} - иначе у Вас скроется даже меню первого уровня.

А вообще такие вещи лучше делать по шагам, так быстрее понимаешь, что к чему. Предложу ссылку из моего Избранного:
http://www.webmascon.com/topics/coding/42a.asp

PS. Перечитав заново Ваш вопрос, возникли сомнения - а выпадающий ли список Вы делаете? Зачем нужна эта одиночная ссылка в начале кода?

Ualife

# 4

= общий = | 28.08.2008, 13:18

Нет, мне нужен не выпадающий список.
Мне нужно изменять свойство visibility у одного элемента при наведении на другой элемент. Эти элементы не зависимы от друг друга. Выпадающий список - пример.

Иван Сергеевич

# 5

= общий = | 28.08.2008, 13:31

Тогда лучше сделать через JS+CSS:

<script>
function showMenu(vis)
{
   var obj = document.getElementById('hiddenmenu'); 
   if (!obj) return false;
   obj.className = (vis ? obj.className.replace("hidden","") : obj.className+' hidden');
}
</script>
<style type="text/css">
.hidden {
   visibility: hidden;
}
a:hover{color:#F0F}

</style>
<a href='#' onmouseover='showMenu(1);' onmouseout='showMenu(0);'>test</a>
<ul id='hiddenmenu' class='hidden'><li>1</li><li>2</li></ul>
123


Тут я специально добавил немного текста после списка, чтобы была видна разница между visibility: hidden и display: none;
В первом случае список не виден, но занимает место на странице. Если заменить на display: none, то текст переместится к ссылке.

PS. Вариант решения наподобие выпадающих списков получится несколько сложнее, так как там необходимо вложить этот список в один блок с ссылкой, кроме того из-за ИЕ6 все равно придется обратиться к помощи JavaScript.

Ualife

# 6

= общий = | 28.08.2008, 13:41

Нет, я хочу узнать как это делается именно с помощью CSS, с помощью Js я знаю как.

Ualife

# 7

= общий = | 28.08.2008, 13:57

На cssplay.co.uk много примеров, но я не могу разобратся с синтаксисом, а быстрый поиск книг ничего не дал. Вот и решил задать вопрос сюда

Иван Сергеевич

# 8

= общий = | 28.08.2008, 14:08

Тогда объясню:

1. Создается блок (DIV, UL или еще что-то).
2. В него вкладывается требуемый объект. При загрузке страницы он скрывается с помощью стилей:
.cssMenu ul ul {
visibility:hidden;
}
.cssMenu ul ul - список второго уровня в объекте с классом cssMenu
3. Теперь необходимо его показать при наведении на родительский объект:
.cssMenu ul li:hover ul, .cssMenu ul a:hover ul{
visibility:visible;
}
Тут .cssMenu ul li:hover ul - это список второго уровня, находящийся в том пункте первого списка, на который навели мышь (псевдокласс :hover).
Первый вариант сделан для "нормальных" браузеров (ИЕ выше 6 и остальные), которые понимают псевдокласс :hover. Дело в том, что ИЕ6 использует :hover только для ссылок, что неудобно, т.к. нельзя вкладывать в ссылки списки и прочие объекты. Поэтому для ИЕ6 либо выполняют JS-код обработчиков OnMouseOver/OnMouseOut, либо вставляют таблицы НЕ ЗАКРЫВАЯ ссылку (этот вариант приведен Вами).

Все остальные стили используются больше для позиционирования и красивого отображения.

Ualife

# 9

= общий = | 28.08.2008, 14:19

.cssMenu ul a:hover ul - это означает, что при наведении на элемент a , который находится в списке ul, который находится в блоке <div class=cssMenu> , будет отображаться элемент ul , который находится в списке ul, который находится в блоке <div class=cssMenu> ?

Иван Сергеевич

# 10

= общий = | 28.08.2008, 14:36

Не совсем так.
.cssMenu ul a:hover ul - это просто фильтр, нечто вроде XPath.
Разбираем последовательно объекты:
Стиль применяется к объектам UL в ссылке "под мышью", находящейся в другом объекте UL блока со стилевым классом cssMenu. Причем он может быть применен и к UL третьего уровня, если тот вложен в один из объектов ссылки.

Более сложный пример:
.cssMenu ul a:hover >ul
В данном варианте стиль применится к НЕПОСРЕДСТВЕННОМУ потомку ссылки.

Советую прочитать цикл статей о CSS (CSS по шагам) - очень хорошо расписаны селекторы.

Ualife

# 11

= общий = | 28.08.2008, 14:43

Спасибо, будем учиться.

 

Возможность оставлять сообщения в мини-форумах консультаций доступна только после входа в систему.
Воспользуйтесь кнопкой входа вверху страницы, если Вы зарегистрированы или пройдите простую процедуру регистрации на Портале.

Яндекс Rambler's Top100

главная страница | поддержка | задать вопрос

Время генерирования страницы: 0.14909 сек.

© 2001-2019, Портал RFPRO.RU, Россия
Калашников О.А.  |  Гладенюк А.Г.
Версия системы: 7.77 от 31.05.2019
Версия JS: 1.34 | Версия CSS: 3.35