Question

我有一个基本页面，我试图为每个网址显示一个标题，如果你将鼠标悬停在上面，我希望网址在标题下面闪烁。我试着在这里跟随一个例子，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>

为什么鼠标悬停不会使文字在这种情况下可见？谢谢

Answer 1

您应该单独包含jquery，然后在window ready上附加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>

EDIT 这是一个完整的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>

javascript mouseover未注册，但CSS为

1 个答案: