HTML和CSS中z-index和cursor:pointer无法正常工作

Question

HTML和CSS中z-index和cursor:pointer无法正常工作

3

我对CSS和HTML5还比较新。以下脚本有两个问题：

#someDiv中的cursor:pointer;在悬停在#anotherDiv和#someLinesDiv上时显示为指针
z-index似乎无法正常工作 - #someDiv应该在其他div上方

我真的很感激你的帮助，因为这让我感到疯狂 :) 提前感谢！ JS Fiddle Here HTML

<body>
<table id="AlphaTable">
    <tbody>
        <tr>
            <td>
                <div id=topLevelDiv>
                    <div id="someDiv" />
                    <div id="anotherDiv">
                        <div>
                            <div id="anotherDivOval" /></div>
                    </div>
                    <div id="someLinesDiv">
                        <div id="someLinesDivTopLine" />
                        <div id="someLinesDivBottomLine" /></div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

#AlphaTable {
    position: relative;
}
#topLevelDiv {
    position: relative;
    z-index: 1;
}
#someDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 18px;
    width: 30px;
    z-index: 40;
    background-color: orange;
    cursor:pointer;
}
#anotherDiv {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 18px;
    width: 30px;
    background-color: white;
    z-index: 2;
}
#anotherDivOval {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 20px;
    height: 8px;
    border-style: solid;
    border-radius: 50%;
    border-width: 1px;
    border-color: black;
    border-collapse: collapse;
    /*background-color: yellow;*/
}
#someLinesDiv {
    position: absolute;
    top: 0px;
    left: 35px;
    height: 18px;
    width: 30px;
    border-collapse: collapse;
    background-color: yellow;
}
#someLinesDivTopLine {
    position: absolute;
    left: -5px;
    top: -19px;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    border-color: transparent transparent black transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 0px;
    background-color: yellow;
}
#someLinesDivBottomLine {
    position: absolute;
    left: -1px;
    top: 22px;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    border-color: black transparent transparent transparent;
    border-top-left-radius: 30px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    /*background-color: yellow;*/
}
#AlphaTable {
    position: relative;
}
#AlphaTable th {
    position: relative;
}
#AlphaTable tr {
    position: relative;
}
#AlphaTable td {
    position: relative;
}

- LeonardBuchanon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CRABOLO · Accepted Answer

1) 你的其他div的鼠标指针是因为它们从父级#someDiv继承了这个属性。如果没有覆盖，子元素将继承父元素的所有属性。所以要覆盖该属性，请添加以下内容：

#someDiv:nth-child(1n) {
   cursor: default;
}

2) 你无法通过设置较高的 z-index 值使父级 div 出现在子级 div 的上方。 z-index 属性用于控制兄弟元素之间的层叠顺序。你不能将其用于子-父级别的关系。

举个例子，如果你有以下结构：

<ul>
<li class="appearabove">
<li>
<li>
</ul>

如果li之间重叠，您可以通过设置class="appearabove"的li在其它li的上方显示。

.appearabove { z-index: 1; }

考虑到 li 标签具有默认的 0 z-index。

假设我想将 ul 更改为出现在 li 的上方，像这样：

ul { z-index: 9999; }

不起作用，因为ul是li的父元素。

编辑：子元素可以有无限多的父元素，父元素也可以有无限多的子元素，兄弟元素也可以有无限多的兄弟元素。

<div id="a">
    <div id="b"></div>
    <div id="c">
        <div id="d">
            <div id="e">
                <div id="f"></div>
                <div id="g"></div>
            </div>
        </div>
    </div>
</div>

#a is a parent of #b, #c, #d, #e, #f, #g   #a is a child of no one (although it would be a child of the body tag, and html tag)
#b is a parent of no one.                  #b is a child of #a
#c is a parent of #d, #e, #f, #g           #c is a child of #a
#d is a parent of #e, #f, #g               #d is a child of #a and #c
#e is a parent of #f, #g                   #e is a child of #a, #c, #d
#f is a parent of no one                   #f is a child of #a, #c, #d, #e
#g is a parent of no one                   #g is a child of #a, #c, #d, #e

#f and #g are siblings
#b and #c are siblings