Скрыть / показать div при наведении курсора мыши

0

Прежде всего, я вообще не разработчик Javascript, но мне нужна небольшая помощь Javascript. У меня есть файл a.php, он содержит div, и я собираюсь включить в него еще один файл.

<html>
<body>

<div id="unityObject">div content</div>

<?php include_once('includes/b.php') ?>

</body>
</html>

b.php выглядит так:

<nav id="myNavigation">
"content"
</nav>

Теперь мне нужно следующее: когда мышь закончила "myNaviagtion", скройте "unityObject", если мышь отсутствует, затем снова покажите "unityObject".

Я могу использовать этот простой код, чтобы скрыть "unityObject":

<nav id="myNavigation"
onmouseover="document.getElementById ('unityObject').style.visibility = 'hidden';">

Теперь, если я хочу снова показать "unityObject", мне нужно проверить, является ли someVar истинным. Например:

if (someVar)
{
 "unityObject".style.visibility = "visible";
}
else
{
 "unityObject".style.visibility = "hidden";
}

Но я знаю, как объединить весь этот код, и я не могу использовать простой код в качестве

"onmouseout="document.getElementById ('unityObject').style.visibility = ''visible';"

потому что он не проверяет наличие некоторого Var.

  • 0
    onmouseout="document.getElementById('unityObject').style.visibility = someVar ? 'visible' : 'hidden';"
  • 0
    Просто примечание: когда someVar становится истинным, вам придется someVar мыши и снова навести someVar мыши, чтобы сделать его видимым!?!?!
Показать ещё 1 комментарий
Теги:

2 ответа

0

вы можете использовать функцию onmouseover. как

    <nav id="myNavigation"
onmouseover="hideUnityObject()">

и после этого где-нибудь в вашем html-коде вы можете использовать что-то вроде этого.

<script>
    function hideUnityObject(){

         if (someVar){
         "unityObject".style.visibility = "visible";
        }else{
         "unityObject".style.visibility = "hidden";
        }
    }            
</script>
Поделиться
  • 0
    Я пробовал это перед публикацией вопроса здесь, я нахожу этот код в Google, но он не вызывает функцию hideUnityObject. Я действительно не понимаю.
0

Во-первых, я предлагаю вам добавить класс CSS к вашим элементам с помощью javascript вместо того, чтобы манипулировать встроенными стилями, он предложил сделать это, чтобы четко разделить структуру/контент (HTML), стиль (CSS) и поведение (Javascript). В той же мысли я предлагаю решение, которое не использует встроенные обработчики событий, и вместо этого использует метод addEventListener для ваших элементов, как это предлагается на MDN

следующее, хотя и не оптимальное, - это код, который вам в принципе необходим. Вставьте этот код в <script> перед закрывающим </body> вашего шаблона HTML.

var d = document.getElementById('unityObject'),
    n = document.getElementById('myNavigation');

n.addEventListener('mouseover', hideDiv, true);
n.addEventListener('mouseout', showDiv, true);

function hideDiv(e) {
  d.className = 'hide';
}

function showDiv(e) {
 d.className = 'show';
}

то вы добавляете CSS для стилизации show и hide классы:

.show {
  display: block;
}

.hide {
  display: none;
}
Поделиться
  • 0
    Хотя использование .className работает, следует отметить, что он не позволяет OP присоединять любые другие пользовательские классы CSS к unityObject как они будут уничтожены при назначении классов hide & show в вашем javascript.
  • 0
    Да, конечно. Как уже упоминалось, мое решение является быстрым. Вы можете создать пользовательскую функцию для добавления / удаления имен классов, если вам нужно поддерживать несколько имен классов, или использовать classList.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню