0

我需要一个简单的脚本，允许我更改 ap 标签的内部 html，在我的情况下，当我将鼠标悬停在它上面时，它只是一个纯文本的图像。

例子：

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

当我将鼠标悬停在上面的 p 标签上时，我希望它更改为如下所示的文本

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

3 回答 3

2

您根本不需要为此使用 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/

于 2012-08-02T01:59:06.507 回答
1

尝试以下操作：

var html = $('#one p').html()

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

演示

于 2012-08-02T01:58:45.383 回答
0

试试这个：

<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>
于 2012-08-02T02:11:43.813 回答