css - child 在悬停时与 parent 的 sibling 重叠

Question

所以，这是第一个 div:

<div id="parent">
<a>
<div>
<img />
<h3 id="important_text">text</h3>
</div>
</a>
</div>

第二个 div 结构大致相同......

<div id="sibling">
<a>
<div>
<img />
<h3 id="important_text_n2">text</h3>
</div>
</a>
</div>

我想要的: 当我悬停 #parent 时，我想要 #important_text(只是 h3#important_text，而不是整个 div! ) 与 #sibling(实际上是他的 child img)重叠。当我不悬停在 #parent 上时，我希望 #sibling 与 #parent 重叠。

我已经用 z-index 试过了，但我就是无法让 #important_text 重叠其父级的兄弟(#sibling ).

---

编辑:

使用(不工作的 CSS):

#parent {
z-index: 5;
}
#sibling {
z-index: 15;
}
/* option 1 */
#parent:hover a div h3 {
    z-index: 20;
}
/* option 2 ... here I wanted to decrease the sibling img's z-index to a value between #parent and #important_text, but I didn't work either. */

Answer 1

给H3元素一个绝对位置。示例:

CSS:

h3{
   position:absolute;
   margin-top: -20px;
}