Javascript-форум - Возврат к исходному состоянию после метода hover ()

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)

Возврат к исходному состоянию после метода hover ()

Доброго времени суток!
Есть button с текстом внутри, идея чтобы при наведении курсора на button менялся текст на другой, реализовал следующим образом:

//HTML
<html>
<button class ="but"> текст<br> <span>выделенный текст</span>
</button>
</html>

//JQuery
<script>
$( document ).ready(function(){
$( ".but" ).hover(function(){ // задаем функцию при наведении курсора на элемент
$(this).text("подменный текст"); // задаем текстовое содержимое
}
});
</script>
все работает, но вот как сделать возврат текста к исходному не понимаю, добавление вторым аргументом function(){
$(this).text("первоначальный текст"); } не вариант, так как в первоначальном тексте кнопки имеется <span>

Кто может подсказать, как лучше реализовать возврат к исходному тексту, буду признателен.

Alex83,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

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:after{
        font-size: 12px;
        content: attr(data-txt);
    }
    </style>
</head>
<body>
<button class ="but" data-txt="подменный текст"> текст<br> <span>выделенный текст</span>
</button>
</body>
</html>

Большое спасибо! Правильно я понимаю, что в данном случае использовать JS нецелесообразно/невозможно?

Alex83,
можно и js, но зачем?

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;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $(".but").each(function(i, el) {
                    $(this).data("html", this.innerHTML);
                })
                .mouseenter(function() {
                    $(this).text("подменный текст");
                }).mouseleave(function() {
                    $(this).html($(this).data("html"))
                })
        });
    </script>
</head>
<body>
    <button class="but"> текст<br> <span>выделенный текст</span>
    </button>
</body>
</html>

А возможно подменить двустрочным текстом?

<!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:after{
font-size: 12px;
content: attr(data-txt);
}
</style>
</head>
<body>
<button class ="but" data-txt="подменный текст"> текст<br> <span>выделенный текст</span>
</button>
</body>
</html>

Цитата:

Сообщение от рони

Alex83,
Пожалуйста, отформатируйте свой код!

:-?

Извиняюсь,пишу код с табуляцией, отправляю, сообщение отображается без табуляции...
Как возможно вставить в data-txt="подменный текст" двустрочный текст?

Цитата:

Сообщение от 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: "подменный";
        color: rgba(255, 0, 0, 1);
    }
    .but:hover:after{
        margin-top: 14px;
        font-size: 12px;
        content: "текст";
        font-weight: bold;
    }
    </style>
</head>
<body>
<button class ="but" > текст<br> <span>выделенный текст</span>
</button>
</body>
</html>