Форум

рони · #11 (**permalink**) 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>

рони · #12 (**permalink**) 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 · #13 (**permalink**) 03.07.2021, 21:36

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

Форум

Справочник

Discord чат

Курсы javascript