1 Востаннє редагувалося Chemist-i (26.04.2022 16:35:35)

Тема: Рамка навколо таблиці

Підскажіть будь ласка як зробити щоб рамка зявлялась і зникала навколо таблиці так як це зроблено на сайті https://www.ispsystem.ru/software/billmanager там де 6 блоків розділу "Возможности панели BILLmanager".

Скопіювати там таку таблицю не виходить (

Прихований текст

http://fastpic.at.ua/_nw/37/53465677.jpg

2

Re: Рамка навколо таблиці

Кацапська, сховав під спойлер, наступного разу самостійно.

3

Re: Рамка навколо таблиці

Це робиться через :hover. Наприклад, якщо у вас стиль для елемента з класом .test, то стиль .test:hover використовуватиметься тоді, коли над елементом знаходиться курсор миші.

Ось приклад:

<!DOCTYPE HTML>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            .table {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                width: fit-content;
            }
            .table a {
                width: 100px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                text-decoration: none;
                color: black;
                
                border-radius: 20px;
                border: solid 1px rgba(0, 0, 0, 0);
            }
            .table a:hover {
                border: solid 1px #ccc;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
                animation: show-shadow 0.5s 1;
            }
            
            @keyframes show-shadow {
                0% {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.0);
                }
                100% {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
                }
            }
        </style>
    </head>
    <body>
        <div class="table">
            <a href="#">
                Один
            </a>
            <a href="#">
                Два
            </a>
            <a href="#">
                Три
            </a>
            <a href="#">
                Чотири
            </a>
            <a href="#">
                П'ять
            </a>
            <a href="#">
                Шість
            </a>
        </div>
    </body>
</html>
Подякували: leofun011