如何使用外部 JavaScript 在鼠标悬停时显示 div/元素？

Question

My divs are nested so i understand i cant display an element if its already hidden. I want the information( p1 inside my html code)to display once the mouse hovers over another element( h1 in my html. I have already made my paragraph 1 style to none in JavaScript, now i need it to re-appear, i have tried the following code to attempt to make it re-appear document.getElementById("1").onmouseover.style.display = "block"; but with no success.

This is My HTML code, ignore the order im new to web dev lol

This is the code i have tried but it doesnt seem to work

This is the end result i want, the circled text on hover display the paragraph

Answer 1

So a few things. For starters, put actual code into your questions instead of screen shots. If we can't reproduce your issue it's difficult to troubleshoot usually from just pictures.

Next, you might familiarize yourself with syntax a bit more since p1 isn't a valid HTML element.

Then, try not to rely on javascript too much and keep presentation stuff on the compositor thread. Here's an example accomplishing your goal with no javascript. Hope it helps, cheers!

 p { display: none; } h1:hover + p { display: block; }

 <h1>Hover me</h1> <p>PEEK A BOO!</p>

Answer 2

Yes, this is doable without javascript but since the question asked how to do it with, hopefully this helps get OP on the right track.

  <div id="bioBlock" style="display:none">
    <h2 id="1">
      Cameron Lodge
    </h2>
    <p1 id="para">Im an avid learner of anything computers....</p1>
  </div>

  function showBioBlock() {
    document.getElementById("bioBlock").style.display = "block";
  }

https://jsfiddle.net/avL3j765/

Answer 3

 document.getByElementId("myH1").onmouseover = function(){
    displayH1("myP");
}
document.getByElementId("myH1").onmouseout = function(){
    displayH1("myP");
}

function displayH1(myId){
    if(document.getByElementId(myId).style.display == "block"){
        document.getByElementId(myId).style.display = "none";
    }else{
        document.getByElementId(myId).style.display = "block";
    }

}

This invokes a function that toggles the paragraph's style when the mouse enters and leaves the element. It assumes that you have an id on both your h1 and p tags, in my example myH1 and myP respectively.