我有一个基本页面，我试图为每个网址显示一个标题，如果您将鼠标悬停在上面，我希望网址在标题下方闪烁。我试着按照这里的例子，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，然后在准备好窗口时附加 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>
关于javascript mouseover 没有注册，但是 CSS 是，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31214817/