如何創建一個函數來將我的段落更改為帶有onmouseover的img

Question

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

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

這是我目前擁有的代碼的（部分）。 我通過驗證器運行它，它說它很好，但當我鼠標懸停在第二段時，它不會將第一段改為我想要的圖像。

Answer 1

您可以使用innerhtml將鼠標懸停時的段落標記替換為圖像標記。 在鼠標懸停事件調用上，您可以調用以下代碼：

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

這是jsfiddle鏈接

Answer 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()">

JS

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/