Question

我遇到了问题。我有这段代码JSFiddle

<div class="row header">

  <div class="col-md-3 col-sd-2 logo">
    <h2>HEADLINE</h2>
  </div>

</div>

<div class="description">

  <div class="about">O NÁS</div>

</div>

不要问我这些职位。我得到了一些阴影。但我真的不知道为什么没有，我把红色div的区域放在活跃的位置。悬停不起作用，链接不起作用。什么都没有！...你能帮帮我吗？

Answer 1

z-index:-100 div.description导致问题。考虑删除它。看起来这里的任何负值都会导致这种奇怪的行为。

我在徘徊 - 你是否在JSFiddle之外尝试过这段代码？也许在JSFiddle iFrame中存在z-index冲突，隐藏了这个元素＆＃34;在＆＃34; JSFiddle生成的其他DOM节点

HTML：

<div class="row header">
    <div class="col-md-3 col-sd-2 logo">
         <h2>HEADLINE</h2>

    </div>
</div>
<div class="description">
    <div class="about">O NÁS</div>
</div>

CSS：

body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 20px;
    background: white;
    font-family: Helvetica;
}
h2 {
    color: #664F34;
}
.header {
    color: #664F34;
    position: relative;
    padding: 10px;
    height: 100px;
    background-color: #fff;
    text-align: center;
}
.cases {
    font-family: AktivGrotesk-Black;
}
.description {
    position: relative;
    width: 100%;
    height: 200px;
    background: red;
}
.about {
    padding: 20px;
    border-radius: 10px;
    background-color: #f5cf9f;
    border: 1px solid #e3c095;
    width: 100px;
    position: absolute;
    top: 60px;
    right: 160px;
    z-index: 100;
    text-align: center;
    color: white;
}
.about:hover {
    background:salmon;
}
.description:hover {
    background:blue;
}
.about:active {
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1) inset;
    color: black;
}

JSFiddle

CSS悬停在具有相对位置的div中不起作用

1 个答案: