onmouseoverイベントが機能しない

-1

あなたのマウスがメインパネルにあるときに自分自身を表示するはずの簡単なハドです。何らかの理由で、onmouseoverとoutが動作しません。パネル上のブラウザでinspect要素をクリックすると、htmlタグが表示されます。私はリスナーがブラウザでinspect要素を見て作成されたことを知っています。onmouseoverイベントが機能しない

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Hello World!</title> 
    <LINK href="stylesheet.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="mainpanel" class="notselectable"> 
     <div id="top"> 
      <img src="icons/white/open.png" style="float:right" class="btnMedia" /> 
     </div> 
     <div id="bottom"> 
      <center> 
       <img src="icons/white/pre.png" class="leftandright btnMedia" /> 
       <img src="icons/white/play.png" class="leftandright btnMedia" /> 
       <img src="icons/white/next.png" class="leftandright btnMedia" /> 
      </center> 
     </div> 
    </div> 
</body> 
<script> 
    var panel = document.getElementById("mainpanel"); 
    var top = document.getElementById("top"); 
    var bottom = document.getElementById("bottom"); 
    //alert("script") 
    panel.onmouseover = function() { 
     alert("in") 
     top.display = "block"; 
     bottom.display = "block"; 
    } 
    panel.onmouseout = function() { 
     alert("out") 
     top.display = "none"; 
     bottom.display = "none"; 
    } 
</script> 
</html>

出典

2016-04-06 user2581567

'top.style.display =" block ";'どこにでも変更を加える –

@RajaprabhuAravindasamy何も変更されていません：O – user2581567

コードには2つの問題があります。 CSSを操作する際styleが見つからない

は
そしてtopはJavaScriptでreserved keywordある値とこの作品の変数

としてそれを使用するトリッキーです：

var panel = document.getElementById("mainpanel"); 
 
var top2 = document.getElementById("top"); 
 
var bottom = document.getElementById("bottom"); 
 

 
panel.onmouseover = function() { 
 
    top2.style.display = "block"; 
 
    bottom.style.display = "block"; 
 
} 
 
panel.onmouseout = function() { 
 
    top2.style.display = "none"; 
 
    bottom.style.display = "none"; 
 
}

#mainpanel { 
 
    background: #faa; 
 
    height: 100vh; 
 
} 
 
#top, #bottom { 
 
    display: none; 
 
}

<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Hello World!</title> 
 
</head> 
 
<body> 
 
    <div id="mainpanel" class="notselectable"> 
 
     <div id="top"> 
 
      I am top! 
 
     </div> 
 
     <div id="bottom"> 
 
      I am bottom! 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-04-06 20:43:17

onmouseoverイベントが機能しない

答えて

関連する問題