Форум PHP программистов > вывести блок при наведении

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: вывести блок при наведении

bastar

27.03.2013 - 11:39

есть HTML


<ul>
   <li><a href = "#" level = "1">1</a></li>
   <li><a href = "#" level = "2">2</a></li>
   <li><a href = "#" level = "3">3</a></li>
   <li><a href = "#" level = "4">4</a></li>
   <li><a href = "#" level = "1">5</a></li>
</ul>

как средствами JQery сделать так, чтобы при наведении на какой либо li в случае если level =1 с правой стороны списка вылетал простой div блок и в нем было бы написано скажем "DONE!"? в момента когда мышка не находится на этом блоке он пропадал бы?

sign63

27.03.2013 - 11:58

[html]
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>

</head>
<body>
<style type="text/css">
#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
padding: 0;
margin: 0;
}
#nav li{
background: none repeat scroll 0 0 #C4D6F3;
float:left;
margin-top: 2px;/* */
margin-right:10px;
position:relative;
display:block;

background: #C4D6F3;
border-radius: 5px 5px 5px 5px;
border-right: 1px;
border-right: 2px solid #00BFFF;
border-top: 2px solid #00BFFF;
border-left: 2px solid #00BFFF;
border-bottom: 2px solid #00BFFF;
}

#nav li a{
display:block;
padding:5px; background: none repeat scroll 0 0 #C4D6F3;
text-decoration:none;
border-radius: 5px 5px 5px 5px;
border-right: 1px;

}
#nav li a:hover{
color: black;
text-decoration: underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{

list-style:none;
position:absolute;
padding: 0;
margin: 0;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
/*-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
float:none;
/*background:url(dot.gif);*/
}
#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{
margin-top: 2px;
margin-left: -4px; /* Выводим выпадающий пункт при наведении курсора */
left: 3px; /* Приносим его обратно на экран, когда нужно */
opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
background: #6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
background: #C4d6F3;

}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
background:#333;
background:#fff; /* Будет полупрозрачным */
text-decoration:underline;
}
</style>

<div class="r5s-menu-cont">
<ul id="nav">
<li>
<a >Главная</a>
<ul>
<li><a href="?part=r5s">На Главную</a></li>
<li><a href="?part=r5s&page=archive">Архив новостей</a></li>
</ul>
</li>
<li>
<a >О Системе</a>
<ul>
<li><a href="?part=r5s&page=about">Упорядочение/5S</a></li>
<li><a href="?part=r5s&page=stands">Описание стендов</a></li>
<li><a href="?part=r5s&page=steps">Шаги цехов</a></li>
<li><a href="?part=r5s&page=photo&dir=%2fkachestvo%2f%f1%e0%e9%f2+5S%2f%eb%e8%f2%e5%f0%e0%f2%f3%f0%e0&path=%2fkachestvo%2f%f1%e0%e9%f2+5S%2f%eb%e8%f2%e5%f0%e0%f2%f3%f0%e0&prefix=5s&append_dir=%f1%e0%e9%f2+5S%2f%eb%e8%f2%e5%f0%e0%f2%f3%f0%e0">Литература</a></li>
</ul> 
</li>
<li>
<a >Инспекции</a>
<ul>

<li><a href="?part=r5s&page=photo&dir=%2fkachestvo%2f%d4%ee%f2%ee%e3%f0%e0%f4%e8%e8+%f1+%e8%ed%f1%ef%e5%ea%f6%e8%e8&path=%2fkachestvo%2f%d4%ee%f2%ee%e3%f0%e0%f4%e8%e8+%f1+%e8%ed%f1%ef%e5%ea%f6%e8%e8&prefix=5s&append_dir=%d4%ee%f2%ee%e3%f0%e0%f4%e8%e8+%f1+%e8%ed%f1%ef%e5%ea%f6%e8%e8">Замечания по "5S"</a></li>
<li><a href="?part=r5s&page=photo&dir=%2fkachestvo%2f%cf%f0%ee%f6%e5%ed%f2+%e2%fb%ef%ee%eb%ed%e5%ed%e8%ff&path=%2fkachestvo%2f%cf%f0%ee%f6%e5%ed%f2+%e2%fb%ef%ee%eb%ed%e5%ed%e8%ff&prefix=5s&append_dir=%cf%f0%ee%f6%e5%ed%f2+%e2%fb%ef%ee%eb%ed%e5%ed%e8%ff">Процент выполнения</a></li>
<li><a href="?part=r5s&page=photo&dir=%2fkachestvo%2f%c3%f0%e0%f4%e8%ea%e8+%e8%ed%f1%ef%e5%ea%f6%e8%e9&path=%2fkachestvo%2f%c3%f0%e0%f4%e8%ea%e8+%e8%ed%f1%ef%e5%ea%f6%e8%e9&prefix=5s&append_dir=%c3%f0%e0%f4%e8%ea%e8+%e8%ed%f1%ef%e5%ea%f6%e8%e9"> График инспекций</a></li>
<li><a href="?part=r5s&page=tops">Рейтинг</a></li>
</ul>
</li>
<li>
<a >ОРД</a>
<ul>
<li><a href="?part=r5s&page=photo&dir=%2fkachestvo%2f%f1%e0%e9%f2+5S%2f%ce%f0%e3%e0%ed%e8%e7%e0%f6%e8%ee%ed%ed%ee-%f0%e0%f1%ef%f0%e5%e4%e5%eb%e8%f2%e5%eb%fc%ed%e0%ff+%e4%ee%ea%f3%ec%e5%ed%f2%e0%f6%e8%ff&path=%2fkachestvo%2f%f1%e0%e9%f2+5S%2f%ce%f0%e3%e0%ed%e8%e7%e0%f6%e8%ee%ed%ed%ee-%f0%e0%f1%ef%f0%e5%e4%e5%eb%e8%f2%e5%eb%fc%ed%e0%ff+%e4%ee%ea%f3%ec%e5%ed%f2%e0%f6%e8%ff&prefix=5s&append_dir=%f1%e0%e9%f2+5S%2f%ce%f0%e3%e0%ed%e8%e7%e0%f6%e8%ee%ed%ed%ee-%f0%e0%f1%ef%f0%e5%e4%e5%eb%e8%f2%e5%eb%fc%ed%e0%ff+%e4%ee%ea%f3%ec%e5%ed%f2%e0%f6%e8%ff"> Документация</a></li>

</ul>
</li>
<li>
<a >Контакты</a>
<ul>
<li><a href="?part=r5s&page=resp">Ответственные</a></li>
<li><a href="?part=r5s&page=managers">Консультанты "5S"</a></li>
<li><a href="?part=r5s&page=faq">Вопрос - ответ</a></li>
<li><a href="?part=r5s&page=link">Обратная связь</a></li>
</ul>
</li>
</body>
</html>

вставь глянь мб на мысль наведет
[html]

_____________
user posted image

Быстрый ответ:

Здесь расположена полная версия этой страницы.