1

我正在制作一个有菜单的网站，但问题是即使不包含该选项，菜单也总是不透明，当我将鼠标悬停在其中的一个选项上时，我注意到鼠标可以点击下面的某个元素菜单，我不希望这种情况发生，那么如何防止这种情况发生？

如您所见，即使菜单打开，仍然可以单击这两个圆形复选标记。

在此处输入图像描述

编辑： 原来是position:absolute;导致这个问题，我不知道为什么会这样。其实我什至不确定。仍在等待答案。

事实证明，页面中的任何元素都position:absolute;表现相同！

<div class="mainTaskWrapper clearfix">
    <!-- All ID names are to be changed later on -->
    <div class="mainMarker"></div>
    <label for="task1">This is task1</label>
    <!-- holder, checkButton and optTrigger are the underneath elements -->
    <div class="holder"></div>
    <div class="subTrigger"></div>                            
    <div class="checkButton"></div>
    <div class="optTrigger"></div>
    <!-- the following is for the drop-down menu -->
    <div class="mainOptions">
        <ul>
            <li id="mainInfo">Details</li>
            <li id="mainDivide">Divide</li>
            <li id="mainEdit">Edit</li>
            <li id="mainDelete">Delete</li>
        </ul>                               
    </div>
</div>

这就是它的样式：

//This is for the tick buttons underneath the drop-down menu    
div.holder , div.checkButton, div.optTrigger {
    display: inline-block;
    opacity: 0.2;
    height: 20px;
    width: 20px;
    float:right;
    margin-top: 0px;
    margin-left:5px;
    cursor: pointer;
}

div.checkButton {
    background: url('../img/check_checked.png') no-repeat center;
}

div.checkButton:hover {
    opacity: 1.0;
}

div.optTrigger {
    background: url('../img/toggle_down_light.png') no-repeat center;
}

div.optTrigger:hover{
    opacity: 1.0;
}

div.optTrigger.active{  
    opacity: 0.9;
    border-radius: 5px 5px 0px 0px;
    background: url('../img/toggle_down_light_opened.png') no-repeat center darkslategray;
}

div.holder {
    opacity: 1.0;
    background: url('../img/holder.png') no-repeat center;
    cursor: move;
}

//The following is for the drop-down menu
.mainOptions {
    display:inline-block;
    position:absolute;
    background : darkslategrey;
    opacity: 1.0;
    left : 626px;
    top:25px;
    border-radius: 5px 0px 5px 5px;
}

.mainOptions li {
    color : lightgrey;
    border-bottom: 1px solid grey;
    padding:5px 15px;
    font-size : 12px;  
    cursor:pointer;
}

.mainOptions li:hover {
    background : grey;
}

.mainOptions li:last-of-type:hover{
    border-radius: 0px 0px 5px 5px;
}

.mainOptions li:first-of-type:hover{
    border-radius: 5px 0px 0px 0px;
}

.mainOptions li:last-of-type{
    border:none;
}
4

0 回答 0