悬停并显示代码

Hover and show code

本文关键字：代码 显示 悬停      更新时间：2023-09-26

我们是ASM程序员，没有html/css/js web经验。我想要一系列的行，可能是30行，当一行悬停在一行上时，隐藏的文本就会出现，当悬停移开时就会隐藏。我们从网站上的jQuery答案中提取了代码，但无法使其工作。非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <script src="jquery-1.11.1.js"></script>
    <meta charset="utf-8"><title>puff1</title>
    </head>
    <body>
        <a href="#Dud" class="mark">Hover here</a>
        <div class="icontent">
            <p> Some nice Queen's english here ..." </p>
        </div>
$(".mark").on({
    mouseover: function() {
    $(".icontent").stop().show(1000);
    },
    mouseout: function() {
        $(".icontent").stop().hide(1000);
        }
    })
</body>
</html>

用<script>标签包装代码：

<script>
    $(".mark").on({
        mouseover: function() {
            $(".icontent").stop().show(1000);
        },
        mouseout: function() {
            $(".icontent").stop().hide(1000);
        }
   })
</script>

也许你想要这样的东西：

<script>
    $(function(){
        $(".mark").on({
            mouseenter: function() {
                $(this).next(".icontent").stop().show(1000)
            },
            mouseleave: function() {
                $(this).next(".icontent").stop().hide(1000);
            }
        });
    });
</script>

因为你说：

我想要一系列的台词，大概30句，当一个人悬停在一行上时，隐藏的文本就会出现并隐藏悬停移动。

因此，使用$(".icontent")显示或隐藏将导致类icontent的所有元素同时显示/隐藏。

相关文章：