CSS悬停不适用于<a>标记

Question

我正在尝试使用CSS在标签上显示div。由于某种原因，它无法正常工作。

这是我的代码：

<style>
.div-to-display {
    background: yellow;
    position: absolute;
    display: none;
    z-index: 10;
    width: 150px;
    min-height: 50px;
    color: black;
}
.det1 {
    color: blue;
}
.det1:hover > .div-to-display {
    display: block
}
</style>


<td>
    <a class='det1'>link</a>
    <div class='div-to-diplay'></div>
</td>

当我替换此：

.det1:hover > .div-to-display {
    display: block
}

有了这个：

td:hover > .div-to-display {
    display: block
}

它以这种方式工作，但是我需要它与<a>tag 一起使用。

有什么帮助吗？谢谢！

Answer 1

.det1:hover + .div-to-display {
    display: block
}

在选择下一个相邻元素时将起作用

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048