0
私が設計しているウェブページの一部は、いくつかの要素が並んで配置されています（div）。それぞれに画像が含まれています。ユーザーのマウスがdivに入るとドロップダウンメニューが表示されます。しかし、単純な "print hello"関数でテストすると、私が期待していた結果が得られませんでした。onmouseenterイベントはdiv要素で動作しません
この時点で、画像は正しく配置され、指定されたように画像のサイズが調整されます。ただし、カーソルが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>
コンソールにエラーが戻っていませんか？ – Santi
エラーはありません。 – VlassisFo
はうまく動作します：https://jsfiddle.net/js8j0a1s/ - 時にはコンソールが物事を表示するのにもう一度時間がかかります。 –