css - 孩子在悬停时重叠其父母的兄弟姐妹

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他的孩子）。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;
}