Скрыть/показать div на mouseover/mouseout

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

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

потому что ДУС не проверяют someVar.

источник

2014-09-17 User 987

'onmouseout = "document.getElementById ('unityObject') style.visibility = someVar 'видимый': 'скрытый';.?"' – LcSalazar

Только примечание: Когда 'someVar' становится правдой, вы бы для мыши и мыши снова, чтобы сделать его видимым!?!?! – LcSalazar

Если вы открыты для использования JQuery, вы можете проверить: [jQuery: Toggle] (http://api.jquery.com/toggle/) – Brian

Во-первых, я предлагаю вам добавить класс CSS к вашим элементам с помощью javascript, а не манипулировать встроенными стилями, поэтому предлагается четко разделить структуру/контент (HTML), стиль (CSS) и поведение (Javascript). В той же мысли я предлагаю решение, которое не использует встроенные обработчики событий, а вместо этого использует метод addEventListener для ваших элементов, as is suggested on 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; 
}

источник

2014-09-17 21:48:28

При использовании '.className' работает, следует отметить, что он предотвращает OP от прикрепления каких-либо других пользовательских классов CSS до 'unityObject', поскольку они будут уничтожены при назначении классов' hide' & 'show' в вашем javascript. – Brian

Да, абсолютно. Как упоминалось, мое решение является быстрым. Вы можете создать пользовательскую функцию для добавления/удаления имен классов, если вам нужно поддерживать несколько имен классов или использовать классList. –

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

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

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

<script> 
    function hideUnityObject(){ 

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

источник

2014-09-17 21:49:28 Reza

Я пробовал это, прежде чем размещать вопрос здесь, я нахожу этот код в Google, но он не вызывает функцию hideUnityObject. Я действительно не понимаю. –

Скрыть/показать div на mouseover/mouseout

ответ

Смежные вопросы