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到无:

.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 是实验性的。请自行决定使用。