Блог

Главная - Вопросы по программированию - событие onmouseenter не будет работать с элементом div

событие onmouseenter не будет работать с элементом div

#javascript #html #css

#javascript #HTML #css

Вопрос:

Часть веб-страницы, которую я разрабатываю, состоит из нескольких div элементов, расположенных рядом. Каждый из них содержит изображение. Я хочу вызвать выпадающее меню, когда мышь пользователя вводит div. Однако тестирование его с помощью простой функции «print hello» не дало ожидаемых результатов.

На этом этапе изображения размещаются правильно, и их размер настраивается так, как я указал. Однако курсор отсутствует pointer , и функция test не запускается, когда мышь входит в div. В прошлом у меня была эта проблема с событиями щелчка, и я всегда пытался найти способ ее обойти. Может кто-нибудь объяснить, почему это не сработает?

Вот html

 #container {
  background-color: black;
  border-radius: 20px;
  display: inline-block;
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}
#icon {
  background-color: burlywood;
  border-radius: inherit;
  border-radius: 20px;
}
#menu a {
  font-size: 30px;
  font-family: "Arial";
  color: white;
  text-decoration: none;
  margin-left: 50px;
}
#flag {
  width: 50px;
  height: 50px;
}
#menu a:hover {
  color: #e55d00;
}
body {
  height: 2000px;
  background-image: url("background.jpg");
}
#btt {
  bottom: 0;
  color: white;
  position: fixed;
  text-decoration: none;
}
#contain {
  display: inline-block;
  height: 1000px;
  width: 100%;
  max-width: 100%;
  position: absolute;
}
#sidemenu {
  width: 0;
  height: 100%;
  z-index: 1;
  background-color: black;
  transition: width 1s;
  padding-top: 200px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
}
#sidemenu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
#sidemenu a:hover {
  color: red;
}
#language {
  margin-left: 250%;
}
#title a {
  color: #e55d00;
  text-decoration: none;
}
#title {
  font-size: 50px;
  text-align: center;
  border-radius: 20px;
  display: inline-block;
  padding: 10px;
}
#projects {
  margin-top: 200px;
}
#current {
  width: 210px;
  height: 200px;
  cursor: pointer;
}
#current img {
  width: inherit;
  height: inherit;
}
#progress {
  margin-left: 200px;
  width: 210px;
  height: 200px;
  cursor: pointer;
}
#progress img {
  width: inherit;
  height: inherit;
}  
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Projects</title>
  <link type="text/css" rel="stylesheet" href="projects.css">
</head>

<body>
  <div id="container">
    <table>
      <tr>
        <td>
          <div id="icon">
            <img src="img.png">
          </div>
        </td>
        <td>
          <div id="title" title="Home">
            <a href="electrocats.html">Electrocats</a>
          </div>
          <div id="menu">
            <a href="#" onclick="summonMenu()">News</a>
            <a href="projects.html">Projects</a>
            <a href="#">About Us</a>
            <a href="#">menu item 4</a>
          </div>
        </td>
        <td>
          <div id="language">
            <a href="#" title="Translate to Greek">
              <img id="flag" src="Greece-icon.png">
            </a>
          </div>
        </td>
      </tr>
    </table>
  </div>

  <div id="contain">
    <div id="sidemenu" onmouseleave="hideMenu()">
      <a href="Contact.html">contact</a>
      <a href="Films.html">Films</a>
    </div>
  </div>

  <!-- here is the code with the problem -->
  <div id="projects">
    <table>
      <tr>
        <td>
          <div id="current" onmouseenter="test">
            <img src="high-voltage.png">
          </div>
        </td>
        <td>
          <div id="progress" onmouseenter="test">
            <img src="engineering1.jpg">
          </div>
        </td>
      </tr>
    </table>
  </div>



  <a id="btt" href="#top">Back to top</a>


  <script>
    function summonMenu() {
      var menu = document.getElementById("sidemenu");
      menu.style.width = "400px";
    }

    function hideMenu() {
      var menu = document.getElementById("sidemenu");
      menu.style.width = "0";
    }

    function test() {
      console.log("hello");
    }
  </script>
</body>

</html>

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

1. Возвращает ли ваша консоль какие-либо ошибки?

2. Никаких ошибок или результатов вообще.

3. работает просто отлично: jsfiddle.net/js8j0a1s — иногда консоли требуется секунда, чтобы отобразить что-то.

4. Какой браузер и версию вы используете?

5. @raphael75 Я использую последнюю версию Chrome. Я пишу код в webstorm.

Ответ №1:

Здравствуйте, Смотрите приведенную ниже скрипку здесь, я сделал это с помощью alert , но вы можете сделать то же самое, используя console.log Надеюсь, это поможет вам.

Скрипка наведения Div

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

выпадающая скрипка

Ответ №2:

В конце концов, установка положения элемента div , содержащего изображения absolute , решила проблему. Мне еще предстоит понять, почему, но я считаю, что это как-то связано со z-index значениями, указанными в файле css. Я был бы очень признателен, если бы кто-нибудь мог объяснить, почему проблема была решена таким образом.