I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended.
There seems to be an issue with certain parts of the site making the grey overlay disappear upon hover, especially in the #menu and #dragndrop area. I suspect this may be a positioning problem, but so far, I have been unsuccessful in finding a suitable solution. I have tried adjusting the z-index without success.
CSS:
#menu {
background-color: #000;
height: 23px;
padding-top: 7px;
}
#dragndrop {
background-image: url(../img/dragndrop.png);
background-repeat: no-repeat;
width: 733px;
height: 71px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -366.5px;
margin-top: -35.5px;
}
#filedrag {
position: fixed;
height: 100%;
width: 100%;
padding: 0;
}
#filedrag.hover {
background-color: grey;
opacity: 0.5;
}
HTML:
<div id="filedrag">
<div id="menu">
<ul>
<li class="active"><a href="index.php" id="menu-upload">Upload</a></li>
<li><a href="search.php" id="menu-search">Search</a></li>
</ul>
</div>
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="30000000" />
</form>
<script src="filedrag.js"></script>
<div id="dragndrop">
<div id="text-box">
test
</div>
</div></div>
I have attempted to encompass the entire site within #filedrag but encountered issues. Can anyone suggest a solution? When covering the site, hovering over the logo or menu causes the overlay to vanish.