3

当有人拖入要上传的文件时，我试图将我的整个设置变灰。拖动并实际激活灰色的事件正常工作，但它并非在任何地方都有效。

当您将鼠标悬停在网站的某些部分时，灰色消失，特别是在#menu- 和#dragndrop-area 中。我知道这是一个职位问题，但我还没有找到一个好的解决方法。我试过使用 z-index 无济于事。

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>

在这里，我试图将整个站点包装在#filedrag 中，但它不起作用。有任何想法吗？它涵盖了网站，但每当我将鼠标悬停在徽标或菜单上时，它就会消失。

4

2 回答 2

0

试着z-index让一切都在变灰的区域之下。

于 2013-05-31T01:51:03.037 回答
0

不要将整个网站包装在#filedrag 中。而是将其作为一个绝对 div，只是作为如下的直接子级：

...
<div id="filedrag"></div>
</body>

然后让它隐藏并使用您的 Javascript 显示。

关键是可能将可放置区域和 100% 覆盖 div 分开。

于 2013-05-31T01:53:20.197 回答