Преобразование текста в другой текст при наведении мыши

jquery html

93 просмотра

3 ответа

Как я могу заставить мой фактический текст трансформироваться в другой текст, когда пользователь наводит указатель мыши на верхний слой исходного текста. Я предоставил код HTML ниже. Любая обратная связь высоко ценится!

<a href="#" class="btn_action_1">
    <span>Justice League</span>
<i class="ico_arrow"></i>
</a>

EX: у меня есть текст, который называется ABC. Когда пользователь указывает мышью на ABC, элемент преобразуется в DEF. Понял мою точку зрения?

Автор: k4r1 Источник Размещён: 08.11.2019 11:26

Ответы (3)


2 плюса

Решение

Вы можете использовать css :hover, :before,content

a span:not(:hover):before {
  content: "ABC";
}
a span:hover:before {
  content: "DEF";
}
<a href="#" class="btn_action_1">
    <span></span>
<i class="ico_arrow"></i>
</a>

Автор: guest271314 Размещён: 20.08.2016 02:42

0 плюса

Есть решение, которое я сделал:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page</title>
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <script type="text/javascript">

        var text1 = "Justice League";
        var text2 = "Avengers";

        $(document).ready(function () {
            $(".btn_action_1").mouseover(function(){
                $(".btn_action_1 span").html(text2);
            });

            $(".btn_action_1").mouseout(function(){                 
                $(".btn_action_1 span").html(text1);
            });
        });

    </script>
</head>
<body>
    <a href="#" class="btn_action_1">
        <span>Justice League</span>
        <i class="ico_arrow"></i>
    </a>
</body>
</html>
Автор: Luis Sérgio Размещён: 20.08.2016 02:50

0 плюса

Это можно сделать с помощью jQuery hover, mouseenterи mouseleave.

Вы можете изменить HTML mouseenterи повторно инициализировать его до старого послеmouseleave

Вот живая демонстрация на jsfiddle: https://jsfiddle.net/magician03/v5goshLk/

Автор: Diwakar Moturu Размещён: 20.08.2016 03:01
Вопросы из категории :
32x32