css - 限制：悬停到父元素

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;
}

这是你的小提琴：http: //jsfiddle.net/xGPys/1/

---

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