Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Возврат к исходному состоянию после метода hover () (https://javascript.ru/forum/misc/82779-vozvrat-k-iskhodnomu-sostoyaniyu-posle-metoda-hover.html)

рони 03.07.2021 21:35

Alex83,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .but{
        height: 50px;
        width: 100px;
        padding: 0;
        font-size: 12px;
    }
    .but span{
        font-weight: bold;
    }
    .but:hover{
         font-size: 0px;
    }
    .but:hover:before{
        margin-top: 14px;
        font-size: 14px;
        content: attr(data-before);
        color: rgba(255, 0, 0, 1);
    }
    .but:hover:after{
        margin-top: 14px;
        font-size: 12px;
        content: attr(data-after);
        font-weight: bold;
    }
    </style>
</head>
<body>
<button class ="but" data-before='подменный' data-after='текст'> текст<br> <span>выделенный текст</span>
</button>
</body>
</html>

рони 03.07.2021 21:36

Цитата:

Сообщение от Alex83
подменить двустрочным текстом?

$(function() {
            $(".but").each(function(i, el) {
                    $(this).data("html", this.innerHTML);
                })
                .mouseenter(function() {
                    $(this).html("подменный<br>текст");
                }).mouseleave(function() {
                    $(this).html($(this).data("html"))
                })
        });

Alex83 03.07.2021 21:36

То, что надо! Спасибо! Как это работает буду разбираться сам:thanks:


Часовой пояс GMT +3, время: 16:45.