如何创建一个函数来将我的段落更改为带有 onmouseover 的 img答案

【问题标题】：How do I create a function to change my paragraph into an img with an onmouseover如何创建一个函数来将我的段落更改为带有 onmouseover 的 img
【发布时间】：2017-06-01 23:57:56
【问题描述】：

< p id="p1" onmouseover="this.style.color='transparent';flipPara()">
< p id="p2" onmouseover="spookyPara()">

function spookyPara() {
  document.getElementById("p1").attribute = "All_Images/ghost.png";
}

这是我目前拥有的（部分）代码。我已经通过验证器运行它，它说它很好，但是当我将鼠标悬停在第二段上时，它不会将第一段更改为我想要的图像。

【问题讨论】：

flipPara() 是什么？

标签： javascript html css image function

【解决方案1】：

您可以在鼠标悬停时使用innerhtml 将段落标签替换为图片标签。在鼠标悬停事件调用时，您可以调用以下代码：

document.getElementById("para").innerHTML = "<img src='url'/>";

这是jsfiddle link

【讨论】：

【解决方案2】：

最简单的方法是将一个段落和一个图像并排放置在一个 div 中并跟踪鼠标悬停在 div 上，然后使用 css 隐藏/显示它，如下所示：

HTML

<div id="spookyPara">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <img class="hide" src="https://placehold.it/200x200"/>
</div>

CSS

#spookyPara{
  width: 200px;
  height: 200px;
}
.hide{
  display: none;
}
#spookyPara:hover p{
  display: none;
}
#spookyPara:hover img{
  display: block;
}

如果你下定决心要走 js 路线，你可以试试这样的方法（不过我推荐 css 解决方案）：

<div id="spookyPara" onmouseover="spookyPara()" onmouseout="unspookyPara()">

function spookyPara(){
    document.querySelector("#spookyPara > p").classList.add('hide');
    document.querySelector("#spookyPara > img").classList.remove('hide');
}
function unspookyPara(){
    document.querySelector("#spookyPara > p").classList.remove('hide');
    document.querySelector("#spookyPara > img").classList.add('hide');
}

JSFiddle：https://jsfiddle.net/hyhmkv02/

【讨论】：