Появление блока с определённым текстом на js

Question

Заранее всем благодарен. Есть код, в нём 4 блока,(item-container) хочу что бы при наведении на определённый блок появлялся пятый div (info-window) и в зависимости от наведённого блока в пятом диве выводился определённый текст, подскажите как сделать это всё на js, буду очень благодарен.

<div class="team-item">
  <div class="row">
    <div class="col-xl-3">
      <div class="item-container schmitt">
        <img src="img/team/1Michael.jpg">
        <h6 class="team-name">Michael Schmitt</h6>
        <p class="profession">Founder & CEO</p>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="item-container kramer">
        <img src="img/team/2David.jpg">
        <h6 class="team-name">David Krämer</h6>
        <p class="profession">Lead Developer</p>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="item-container schroder">
        <img src="img/team/3Anna.jpg">
        <h6 class="team-name">Anna Schröder</h6>
        <p class="profession">Designer</p>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="item-container teichmann">
        <img src="img/team/4Jason.jpg">
        <h6 class="team-name">Jason Teichmann</h6>
        <p class="profession">Consultant</p>
      </div>
    </div>
  </div>
  <div class="info-window"></div>
</div>

Answer 1

Ладно, давайте попробуем.

Для начала создадим функцию, которая будет изменять содержимое <div class="info-window"></div>.

// Функция принимает один аргумент и записывает его значение в блок .info-window

function updateInfo(text) {
  document.querySelector(".info-window").innerHTML = text;
}

Ну дальше нам надо отследить все наведения. Отслеживать будем на .main-content, чтобы на все элементы не вешать обработчики.

document.addEventListener("DOMContentLoaded", () => {
  const content = document.querySelector(".main-content"); // нода с элементами по которым будем отслеживать наведение.

  content.addEventListener("mouseover", (e) => {
    const itemContainer = e.target.closest(".item-container"); // нода элемента интересующего нас элемента
    if (!itemContainer) return; // если не нашли, то выходим из функции

    if (itemContainer.classList.contains("schmitt")) {
        updateInfo("Навели на Michael Schmitt"); // если навели на Schmitt
    } else {
        updateInfo("Профессия: " +  itemContainer.querySelector(".profession").innerText);
        // В остальных случаях
    }
  })
});

document.addEventListener("DOMContentLoaded", () => {
  function updateInfo(text) {
    document.querySelector(".info-window").innerHTML = text;
  }

  const content = document.querySelector(".main-content"); 

  content.addEventListener("mouseover", (e) => {
    const itemContainer = e.target.closest(".item-container");
    if (!itemContainer) return; 

    if (itemContainer.classList.contains("schmitt")) {
      updateInfo("Навели на Michael Schmitt"); 
    } else {
      updateInfo("Профессия: " + itemContainer.querySelector(".profession").innerText);
    }
  })
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="team-item">
  <div class="row main-content">
    <div class="col-3">
      <div class="item-container schmitt">
        <h6 class="team-name">Michael Schmitt</h6>
        <p class="profession">Founder & CEO</p>
      </div>
    </div>
    <div class="col-3">
      <div class="item-container kramer">
        <h6 class="team-name">David Krämer</h6>
        <p class="profession">Lead Developer</p>
      </div>
    </div>
    <div class="col-3">
      <div class="item-container schroder">
        <h6 class="team-name">Anna Schröder</h6>
        <p class="profession">Designer</p>
      </div>
    </div>
    <div class="col-3">
      <div class="item-container teichmann">
        <h6 class="team-name">Jason Teichmann</h6>
        <p class="profession">Consultant</p>
      </div>
    </div>
  </div>
  <div class="info-window"></div>
</div>

БЛОГ НА HUSL

Появление блока с определённым текстом на js

Ответы (1 шт):