Question

我正在设计的网页的一部分由并排放置的多个div元素组成。每个都包含一个图像。我想在用户的鼠标进入div时召唤一个下拉菜单。但是，使用简单的“打印问候”功能进行测试并没有产生我期望的结果。

此时，图像放置正确，其大小调整就像我指定的那样。但是，当鼠标进入div时，光标不是pointer并且函数test不会运行。我过去曾遇到过点击事件的这个问题，我总是试图找到解决方法。有人可以解释为什么它不起作用吗？

这是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>

Answer 1

您好请参见下面的小提琴我在alert使用console.log完成此操作，但您也可以使用return [ 'db' => [ 'driver' => 'Pdo', 'dsn' => sprintf('sqlite:%s/data/zftutorial.db', realpath(getcwd())), ], ];希望它帮助您。

Div Hover Fiddle

还添加了一个小提琴，在鼠标输入事件中可以看到一个下拉列表。我想你想做什么。

dropdown Fiddle

Answer 2

最后，将包含图片的div的位置设置为absolute解决了这个问题。我还没理解为什么，但我认为它与css文件中指定的z-index值有关。如果有人能够解释为什么问题是这样解决的，我真的很感激。

onmouseenter事件不会对div元素起作用

2 个答案: