Всплывающее окно на кнопу

  • Nik-N

    (@nik-n)


    5 лет, 5 месяцев назад

    Здравствуйте! Пытаюсь сделать кнопку со всплывающим окном, чтобы при наведении на неё курсором менялся цвет кнопки. Загрузил 2 кнопки (обычная и с изменённым цветом при наведении курсора). Всплывающее окно вызывается плагином Easy FancyBox.

    Кнопку изменения цвета делаю через этот код:
    <html>
    <head>
    <meta charset=»utf-8″/>
    <title>Способ №1 — bloggood.ru</title>
    <style>
    a.rollover {
    background: url(http://&#8230;.port.ru/wp-content/uploads/2019/07/Кнопка-Р.png); /* рисунок, который увидим сразу */
    display: block; /* Рисунок как блочный элемент */
    width: 215px; /* Ширина рисунка */
    height: 80px; /* Высота рисунка */
    }
    a.rollover:hover {
    background: url(http://&#8230;.port.ru/wp-content/uploads/2019/07/Кнопка-Р1.png); /* заменяемый рисунок при наведении мыши */
    }
    </style>
    </head>
    <body>
    <p> </p>
    </body>
    </html>

    Всплывающая форма с текстом работает через этот код:
    <div class=»contact-us»><span style=»color: #3c45a3;»><span style=»font-size: 22px; background-color: #ffff00;»>Заказать обратный звонок >>></span></span></div>
    <div class=»fancybox-hidden» style=»display: none;»>
    <div id=»contact_form_pop_up»>Заполните форму, и мы свяжемся с Вами в ближайшее время
    [contact-form-7 id=»281″ title=»Заказ обратного звонка»]</div>
    </div>

    ВОПРОС:
    КАК МНЕ ОБЪЕДИНИТЬ ЭТИ 2 КОДА, ЧТОБЫ МЕНЯЛСЯ ЦВЕТ КНОПКИ И БЫЛО ВСПЛЫВАЮЩЕЕ ОКНО?
    Благодарю за внимание.

Просмотр 2 ответов — с 1 по 2 (всего 2)
Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Тема «Всплывающее окно на кнопу» закрыта для новых ответов.