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

Question

我需要一个简单的脚本，它允许我将 p 标签的内部 html 更改为当我将鼠标悬停在其上时将图像更改为纯文本。

示例:

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

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

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

Answer 1

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

这是一个实际的 fiddle :http://jsfiddle.net/CKpCk/