javascript mouseover 没有注册,但是 CSS 是

javascript mouseover not registering, but CSS is

我有一个基本页面,我试图为每个 url 显示一个标题,如果您将鼠标悬停在上面,我希望 url 在标题下方闪烁。我试着按照这里的示例 http://jsfiddle.net/RetMp/963/,当我的 CSS 正在工作(它最初隐藏文本)时,在鼠标悬停时,它什么也不做。查看那个 jsfiddle 示例,它似乎应该可以工作。模板是这样的:

<head>
    <style>
    #article-link .url-text {
    position:relative;
    visibility:hidden;
    }
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script>
        $(function() {
            $('.hover').mouseover(function() {
                $('.url-text').css("visibility","visible");
            });

            $('.hover').mouseout(function() {
                $('.url-text').css("visibility","hidden");
            });
        });
    </script>
</head>



{% if active_articles %}
{% for article in active_articles %}
    <div id="article-link">
        <p class="hover">
            <span><a href="http://{{ article.url }}">{{ article.title }}</a></span>    <a href="{% url 'index:delete-article' article.id %}">Delete</a>
        </p><p class="url-text">{{ article.url }}</p>
    </div>

{% endfor %}
<br/>
<a href="{% url 'index:new-article' %}"><p>Add a new article to read</p></a>
{% else %}
    <a href="{% url 'index:new-article' %}"><p>Go make some articles!</p></a>
{% endif %}

生成的html(查看页面源代码)是:

<!-- http://jsfiddle.net/RetMp/963/ -->


<head>
    <style>
    #article-link .url-text {
    position:relative;
    visibility:hidden;
    }
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script>
        $(function() {
            $('.hover').mouseover(function() {
                $('.url-text').css("visibility","visible");
            });

            $('.hover').mouseout(function() {
                $('.url-text').css("visibility","hidden");
            });
        });
    </script>
</head>






        <div id="article-link">
            <p class="hover">
                <span><a href="http://https://mail.google.com/mail/">gmail</a></span>    <a href="/delete-article/1/">Delete</a>
            </p><p class="url-text">https://mail.google.com/mail/</p>
        </div>


    <br/>
    <a href="/new-article/"><p>Add a new article to read</p></a>

为什么在这种情况下鼠标悬停不使文本可见?谢谢

您应该单独包含 jquery,然后在 window 准备好时附加 mouseover 和 mouseout 事件。

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
    $(function() {
        $('.hover').mouseover(function() {
            $('.url-text').css("visibility","visible");
        });

        $('.hover').mouseout(function() {
            $('.url-text').css("visibility","hidden");
        });
    });
</script>

编辑 这是一个完整的 html 页面工作:

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <style>
        #article-link .url-text {
            position: relative;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="article-link">
         <p class="hover">
            <span><a href="http://https://mail.google.com/mail/">gmail</a></span>
            <a href="/delete-article/1/">Delete</a>
        </p>
        <p class="url-text">https://mail.google.com/mail/</p>
    </div>

    <br/>
    <a href="/new-article/"><p>Add a new article to read</p></a>
    <script>
        $('.hover').mouseover(function() {
            $('.url-text').css("visibility","visible");
        });

        $('.hover').mouseout(function() {
            $('.url-text').css("visibility","hidden");
        });
    </script>
</body>
</html>