現在は下記ソースのように、四角枠内(dropエリア)にdropするとそのファイル情報が表示されます。

しかし、ファイル情報によってdropエリアの範囲が狭くなってしまうので、これを改善したいと考えてます。

そこで、下の①か②の方法で改善しようと考えています。
①四角枠内にファイルをドラッグオーバーしたら、別でdropエリアを四角枠内に表示させるようにする
→javascriptから「別でdrop用のエリアを出現させる」部分の実装方法が分からないので教えて欲しいです。

②四角枠内の文字をドラッグオーバー中だけ非表示にする
→innerHTMLを非表示にする方法が分からないので教えて欲しいです。

①または②の問題が解決出来る方がいましたら、ご教授をお願いします。

(function() {

    function $id(id) {
  return document.getElementById(id);
 }


 function Output(msg) {
     var m = $id("filedrag");
  m.innerHTML = msg + m.innerHTML;
 }
    // ドラッグオーバー時イベント
 function FileDragHover(e) {
     e.stopPropagation();
     e.preventDefault();
  e.target.className = (e.type == "dragover" ? "hover" : "");
 }


 function FileSelectHandler(e) {

  FileDragHover(e);

  var files = e.target.files || e.dataTransfer.files;

  for (var i = 0, f; f = files[i]; i++) {
   ParseFile(f);
  }
 }

 function ParseFile(file) {
  Output(
   "<p id = 'MessageParagraph'>name: <strong>" + file.name +
   "</strong> size: <strong>" + file.size +
   "</strong> bytes" +
            "</p>"
  );

 }

 $(function () {
     $(document).on('drop dragover', function (e) {
         e.stopPropagation();
         e.preventDefault();
     });
 });

 function Init() {

  var fileselect = $id("fileselect"),
   filedrag = $id("filedrag"),
   submitbutton = $id("submitbutton");
      AddFiles = $id("AddFiles")

  fileselect.addEventListener("change", FileSelectHandler, false);
        
  var xhr = new XMLHttpRequest();
  if (xhr.upload) {

   filedrag.addEventListener("dragover", FileDragHover, false);
   filedrag.addEventListener("dragleave", FileDragHover, false);
   filedrag.addEventListener("drop", FileSelectHandler, false);

   filedrag.style.display = "block";

   AddFiles.style.display = "none";

   fileselect.style.display = "none";
  }

 }

 // 
 if (window.File && window.FileList && window.FileReader) {
  Init();
 }


})();
/*
Styles for HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
*/
body
{
 font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
 font-size: 90%;
 margin: 10px;
 color: #333;
 background-color: #fff;
}

#divBody
{
 width: 550px;  
    margin: 0 auto;  
    text-align: left; 
}

#AddFiles{
    width: 100px;
    height: 25px;
}



#filedrag
{
 display: none;
 margin: 1em 0;
 border: 2px dashed #555;
 cursor: default;
    padding: 0 10px;
 border: 1px solid #999;
    width : 550px ;
    height:200px;
    width : 560px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#filedrag.hover
{
 color: #f00;
 border-color: #f00;
 border-style: solid;
 box-shadow: inset 0 3px 4px #888;
}
#MessageParagraph
{
    border-bottom:solid 1px;
    height:30px;
}


#messages
{
 padding: 0 10px;
 margin: 0;
 border: 1px solid #999;
    width : 550px ;
    height:200px;
    width : 560px ;
    overflow-y: scroll;
    overflow-x: hidden;
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="UTF-8" />
    <title>Upload</title>
    <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
</head>
<body>
    <div id="divBody">
        
        <form id="upload" action="index.html" method="POST" enctype="multipart/form-data">

            <div>
                <div id="filedrag">
                    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
                </div>
            </div>

            <div>
                <button id="AddFiles" type="button" onclick="document.getElementById('fileselect').click();">Add Files....</button>
                <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
            </div>
        </form>



        <script src="filedrag.js"></script>
    </div>
</body>
</html>