Question

当用户将鼠标悬停在原始文本的顶部时，如何将实际文本转换为另一个文本。我在下面提供了HTML代码。任何反馈都非常感谢！

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

EX：我有一个名为ABC的文字。当用户将鼠标指向ABC时，该元素将转换为DEF。明白我的观点？

Answer 1

您可以使用css :hover，:before，content

＆＃13;

a span:not(:hover):before {
  content: "ABC";
}
a span:hover:before {
  content: "DEF";
}

＆＃13;

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

＆＃13;

Answer 2

我有解决方案：

<!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>

Answer 3

这可以通过使用jQuery hover，mouseenter和mouseleave来完成。

您可以更改mouseenter上的html，然后在mouseleave

上将其重新初始化为旧版

以下是jsfiddle的现场演示： https://jsfiddle.net/magician03/v5goshLk/

鼠标悬停时将文本转换为另一个文本

3 个答案: