Блог

Главная - Вопросы по программированию - Элемент JavaScript не отображается при наведении курсора мыши

Элемент JavaScript не отображается при наведении курсора мыши

#javascript #css #hide #mouseover #mouseout

#javascript #css #скрыть #наведение курсора мыши #mouseout

Вопрос:

У меня есть два элемента. Один из них — «menu1» и предназначен для отображения «atlas_menu1» при наведении курсора мыши и скрытия его при наведении курсора мыши. Моя проблема в том, что я также хочу, чтобы «atlas_menu1» оставался скрытым, когда мышь также находится над собой, но она не работает. Вот код, который у меня есть:

 <script type="text/javascript"> 
window.a = document.getElementById("menu1"); 
window.e = document.getElementById("atlas_menu1"); 
a.onmouseover=function(){ e.style.display = "block"; };
a.onmouseout=function(){ e.style.display = "none"; };
e.onmouseover=function(){ e.style.display = "block"; };
e.onmouseout=function(){ e.style.display = "none"; }; 
</script>

Любые мысли о том, как это можно сделать правильно? Вот веб-сайт, который можно увидеть, если вы наведете курсор на пункт меню «Кто мы», вы увидите, что меню открывается, но при наведении курсора на меню оно исчезает. http://linden .flywheelsites.com

Комментарии:

1. вместо этого используйте .onmouseenter .

2. Просто поместите это туда, и теперь он не исчезнет, когда мышь уйдет.

3. вы можете выполнить логику. просто добавьте функцию mouseleave в свой altas_menu1 и снова скройте ее.

4. Что я и сделал, естественно …. но по какой-то причине код не запускается, и я не могу понять, почему.

5. Что вы имеете в виду: я также хочу, чтобы «atlas_menu1» оставался нескрытым, когда мышь также находится над собой.

Ответ №1:

 #hiddenpanel{
 width: 150px;
 height:150px;
 background: green;
 display: inline-block;
 display: none;
}

вот рабочий пример: https://jsfiddle.net/huspg48w/2 /

Ответ №2:

Это должно сработать.

Пример кода:

 <!DOCTYPE html>
  <html>
  <body>
<h3 onmouseover="" onmouseout="" id="menu1">Menu</h3>
<h3 onmouseover="" onmouseout="" id="atlas_menu1">Sub Menu</h3>

<script type="text/javascript"> 
   window.a = document.getElementById("menu1"); 
   window.e = document.getElementById("atlas_menu1"); 
   a.onmouseover=function(){ e.style.display = "block"; };
   a.onmouseout=function(){ e.style.display = "none"; };
   e.onmouseover=function(){ e.style.display = "block"; };
   e.onmouseout=function(){ e.style.display = "none"; }; 
</script>

Приведенный выше код является примером меню, в котором при наведении курсора отображается подменю.