Как отобразить контент с помощью onmouseover - PullRequest
Новая
       47

Как отобразить контент с помощью onmouseover

0 голосов
/ 28 апреля 2020

Я создаю мега-меню для сайта WordPress. При наведении курсора я хочу, чтобы он отображал определенное содержимое в зависимости от того, какой элемент у вас был.

Мне удалось написать некоторый код для достижения эффекта наведения, но содержимое исчезает, прежде чем его можно будет щелкнуть из-за функции onmouseout

Вот пример моего кода 

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
var y = document.getElementById("support");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "none";
  }
}

function customerSupport() {
  var x = document.getElementById("support");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
var y = document.getElementById("myDIV");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "none";
  }
}
<button onmouseover="myFunction()" onmouseout="document.getElementById('myDIV').style.display = 'none';">Try it</button>
<button onmouseover="customerSupport()" onmouseout="document.getElementById('support').style.display = 'none';">Customer Support</button>

<div id="support" style="display:none">
Hello World
</div>
<div id="myDIV" style="display:none">
<button>Try it now!</button>
</div>

Можно ли разрешить мне щелкать отображаемый контент без его исчезновения?

1 Ответ

0 голосов
/ 28 апреля 2020

Вы можете отредактировать HTML так, чтобы ваш «Попробуй сейчас!» содержимое остается внутри контейнера функции mouseover / mouseleave, как показано ниже: 

<div onmouseover="myFunction()" onmouseout="document.getElementById('myDIV').style.display = 'none';">
 <button>Try it</button>
 <div id="myDIV" style="display:none">
  <button>Try it now!</button>
 </div>
</div>

Рабочая JSfiddle здесь: https://jsfiddle.net/59L06jtu/

...