css - 限制 :hover to the parent element

Question

这是我的例子(在互联网上为你找到了一些漂亮的照片):http://jsfiddle.net/xGPys/ (仅适用于 chrome，如果有人发现 Firefox 不喜欢它的原因)

所以给我带来麻烦的部分就在那里:

.imagepreview:hover a {
    top: -61px;
    height: 150px;
    z-index: 1000;
}

我想要实现的是:你应该能够在整列上通过鼠标，并且每个图像应该一个接一个地打开和关闭，现在，打开的照片覆盖了其他的，所以:hover状态是从 <td> 中删除的注释.

我可以使用一点 Javascript，但我更喜欢保持纯 CSS。

谢谢 !

Answer 1

只需设置 pointer-events 至none :

.imagepreview a {
    /* ... other styles ... */
    pointer-events: none;
}
.imagepreview:hover a {
    top: -61px;
    height: 150px;
    z-index: 1000;
}

这是你的 fiddle :http://jsfiddle.net/xGPys/1/

警告: pointer-events是实验性的。自行决定使用。