在jquery中使用悬停显示和隐藏文本

display and hide text using hover in jquery

本文关键字：显示 隐藏 文本 悬停 jquery      更新时间：2023-09-26

我正在尝试使用jQuery中的悬停属性来实现一个简单的功能。当我将鼠标悬停在div上时，一些文本必须显示在span元素中。这几乎就是概念。

<script>
    $(".logo").hover( 
        function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") }, 
        function() { $("#span_hover").html(""); } );
</script>
    <div class="logo"><a href="http://www.gmu.edu/"><img src="images/GMU_logo" height="100" width="150" /></a></div>
    <span id="span_hover" style="position:fixed; bottom:5px; right:150px;"></span>

此代码不起作用！有人能启发我吗？

这样更改代码：

$(document).ready(function() {
    $(".logo").hover(
        function() { 
            $("#span_hover").html("Please visit http://www.gmu.edu for more information.");
        }, 
        function() {
            $("#span_hover").html("");
        }
    );
});

使用$(document).ready(...);，您的javascript代码将等待DOM，如果它已完全加载，它将启动。

http://jsfiddle.net/8as30y06/

您的脚本确实可以工作：http://jsfiddle.net/g2n403zs/。在调用jquery的函数之前，你确定要加载它吗？错误控制台显示了什么？

$(".logo").hover( 
    function() { $("#span_hover").html("Please visit http://www.gmu.edu for more information.") }, 
    function() { $("#span_hover").html(""); } );

这似乎有效（缺少分号）

这是小提琴：

jsFiddle

$(".logo").hover(function() { 
$("#span_hover").html("Please visit http://www.gmu.edu for more information."); }, 
function() { $("#span_hover").html(""); });
相关文章：