Ховер и появляющий блок
Вложений: 1
Ребят есть такая менюшка:
(прикрепил картинку) При наведении на ссылку появляется зеленый блок когда уводишь с сылки зеленый блок пропадает, но притом что если наводишь на зеленый блок он не пропадает (т.е. если с ссылки на блок переводим курсор то блок остается) при том как убираем курсор с блока или ссылки он пропадает. при наведении на вторую ссылку появляется другой зеленый блок с другим текстом пытался многими способами сделать но получилось максимум что. если с ссылки на вторую ссылку наводишь а он оставляет старый зеленый блок Заранее большое спасибо::D |
|
Shuryga, так шоль?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!--<script src="http://code.jquery.com/jquery-latest.js"></script>--> <style> .menu ul { display: flex; justify-content: center; list-style: none; margin: 0; font: 1em/1.2 Tahoma, sans-serif; } .item { margin-right: 50px; padding: 10px 20px; background: orange; } span { display: none; } .description { min-height: 50px; background: transparent; font: 1em/1.2 Tahoma, sans-serif; padding: 10px; color: white; } </style> <body> <div class="menu"> <ul> <li class="item"> <a href="#">Item 1</a> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem inventore neque non praesentium quia quibusdam, sequi tenetur ullam veniam voluptatibus. Aspernatur dolor repellat voluptatum! Assumenda explicabo quasi quo temporibus voluptates?</span> </li> <li class="item"> <a href="#">Item 2</a> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores autem, cumque esse impedit laudantium maiores minima modi nesciunt praesentium quam quasi, quidem sit tenetur ut voluptatum. Doloribus, harum!</span> </li> <li class="item"> <a href="#">Item 3</a> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto corporis incidunt maxime, minus molestias natus porro recusandae reiciendis reprehenderit vero. Consectetur explicabo impedit incidunt qui quibusdam repudiandae rerum voluptas voluptatum!</span> </li> </ul> <div class="description"></div> </div> <script> var ul = document.querySelector('.menu'), div = document.querySelector('.description'), currentSpan; ul.onmouseover = function(e) { if ( e.target.tagName.toLocaleLowerCase() != 'li' || currentSpan ) return; currentSpan = e.target.children[1]; div.style.background = 'green'; div.innerHTML = currentSpan.textContent; }; ul.onmouseout = function(e) { if ( e.relatedTarget == div || e.target.contains(e.relatedTarget) || !currentSpan ) return; div.innerHTML = ''; div.style.background = ''; currentSpan = null; }; </script> </body> </html> |
Да именно так спасибо большое:) :D
|
Часовой пояс GMT +3, время: 19:01. |