Как при наведении сжимать и разжимать блок при этом в конце меняя содержимое?

Например есть блок с текстом, с помощью простого псевдо-элемента hover и свойства transform: scaleX(-1); мы при наведении видим сжатие блока и возвращение его ширины, но с перевернутым текстом.
Нужно чтобы при наведении менялся текст, при этом был еще и слева направо, как обычно.

Дополнительно:

Обернуть текст в что-то: p span
Навесить селектор transform: scale(-1, 1)

Ответы:

Проблему с переворачиванием я решил, не понимаю как изменить содержимое

+ Заказать

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Как при наведении сжимать и разжимать блок при этом в конце меняя содержимое?Есть ответ
    • 07.04.2024
    Ответить

    Для реализации функционала сжатия и разжатия блока при наведении мы можем использовать JavaScript совместно с CSS. Вот пример кода, который поможет вам решить эту задачу:

    1. HTML:
    ```html

    Исходное содержимое блока

    ```

    2. CSS:
    ```html

    .block {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    transition: all 0.3s ease;
    }

    .compressed {
    width: 50px;
    height: 50px;
    }

    ```

    3. JavaScript:
    ```html

    function compressBlock() {
    var block = document.querySelector('.block');
    block.classList.add('compressed');
    document.getElementById('content').innerText = 'Сжатое содержимое блока';
    }

    function expandBlock() {
    var block = document.querySelector('.block');
    block.classList.remove('compressed');
    document.getElementById('content').innerText = 'Исходное содержимое блока';
    }

    ```

    В данном примере при наведении мы добавляем класс "compressed" к блоку, что сжимает его до 50x50 пикселей, а также меняем содержимое блока. При убирании наведения класс удаляется, и блок возвращается к исходному размеру, также меняется содержимое блока.

    Надеюсь, данное решение поможет вам реализовать необходимый функционал на вашем сайте.

Оставить комментарий