如何使用jquery的.hover事件将图像更改为文本

我需要一个简单的脚本，当我悬停在p标签上时，它可以将p标签的内部html更改为纯文本。

示例：

<div id="one">
    <p><img src="events.png" alt="" /></p>
</div>

当我把鼠标悬停在上面的p标签上时，我希望它变成下面的文本

<div id="one">
   <p>Events</p>
</div>

您根本不需要使用javascript。这可以使用css非常简单地处理。

<div id="one">
    <p>
        <span>Events</span>
        <img src="events.png" alt="" />
    </p>
</div>

CSS：

#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }

这是一个实际操作：http://jsfiddle.net/CKpCk/

尝试以下操作：

var html = $('#one p').html()
$('#one').hover(function(){
   $('p', this).html('Events');
}, function() {
   $('p', this).html(html);
})

演示

试试这个：

<html>
<head>
    <title>Try</title>
</head>
    <script type="application/javascript" src="jQuery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#testHover").hover(function()
    {
         $("#testHover").html("Events");
    });
    });
    </script>
<body>
    <div id="one">
        <p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
    </div>
</body>
</html>

相关内容

最新更新

热门标签：