css - 限制 :hover to the parent element

原文 标签 css css-selectors

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

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

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

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

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

谢谢 !

最佳答案

只需设置 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是实验性的。自行决定使用。

关于css - 限制 :hover to the parent element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14203378/

相关文章:

html - 禁用输入元素的样式 - Chrome 和 Firefox 之间的差异

javascript - CSS3或Jquery:将缩略图悬停在上方时会弹出缩略图图像

Javascript改变所有东西的不透明度,但悬停的图像

css - 在SASS中,创建选择器时如何避免插值前的空格?

python - BeautifulSoup4/CSS 选择器如何选择

html - 证明内容属性未按预期工作

jquery - 我可以根据浏览器宽度使用 CSS 或 jQuery 更改占位符文本吗?

jQuery : which is faster in this case (. 查找) vs (.filter)

python-3.x - Selenium - 文本属性仅在调试器检查后才可用

jquery 组每 3 个 div