Как отобразить элемент div / элемент при наведении мыши, используя внешний JavaScript?

Question

Мои элементы вложены, поэтому я понимаю, что не могу отобразить элемент, если он уже скрыт. Я хочу, чтобы информация ( p1 внутри моего html кода) отображалась, когда мышь наводит курсор на другой элемент ( h1 в моем html. Я уже создал свой стиль абзаца 1 в JavaScript нет, теперь мне нужно, чтобы он появился снова, я попробовал следующий код, чтобы попытаться заставить его снова появиться document.getElementById("1").onmouseover.style.display = "block";, но безуспешно.

Это мой HTML код, игнорируйте порядок, в котором я не знаком с веб-разработчиком. Lol

Это код, который я пробовал, но, похоже, он не работает

Это конечный результат, который я хочу, обведенный кружком текст при наведении на абзац

Answer 1

Итак, несколько вещей. Для начала, вставьте реальный код в свои вопросы вместо скриншотов. Если мы не можем воспроизвести вашу проблему, ее трудно устранить, как правило, просто с помощью изображений.

Далее, вы можете ознакомиться с синтаксисом немного больше, поскольку p1 не является действительным элементом HTML.

Затем постарайтесь не слишком полагаться на javascript и сохраняйте презентацию в потоке композитора. Вот пример достижения вашей цели без javascript. Надеюсь, это поможет, ура!

p {
  display: none;
}

h1:hover + p {
  display: block;
}

<h1>Hover me</h1>

<p>PEEK A BOO!</p>

Answer 2

 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";
    }

}

Это вызывает функцию, которая переключает стиль абзаца, когда мышь входит и покидает элемент. Предполагается, что у вас есть идентификатор для тегов h1 и p, в моем примере myH1 и myP соответственно.

Answer 3

Да, это выполнимо без javascript, но поскольку вопрос задан как это сделать, надеюсь, это поможет получить ОП на правильном пути.

  <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/