Показать сообщение отдельно
  #3 (permalink)  
Старый 25.09.2015, 18:09
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

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>
Ответить с цитированием