Parent div 的悬停属性不会影响 child 图片？

Question

我有一个 parent div，里面有两个 child div，一个有图片，一个只有文字。我已经为我的 parent class 分配了一个 :hover 样式，这样当用户将鼠标悬停在整个 div 上时，就会有一个嵌入的阴影......但是当我测试它时， child 包含图像的图像要么不受影响，要么在效果之上..

有没有办法让 :hover 样式也影响图像？

已更新fiddle

编辑： 将 fiddle 更新为空的 div 以说明所需的效果...

css:

.main-box {
    border:2px solid #656565;
}
.main-box:hover {
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}

.image {
    display:inline-block;
}
.text {
    display:inline-block;
}

<div class="main-box">
    <div class="image">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQM2EEo-JUTyhdaFxM3UCMvTM-yotCWzz_v6XeCL6RIYMdY4ZjJ" />
    </div>
    <div class="text">asdfasfda;lskjf</div>
</div>

Answer 1

这个问题的解决方案实际上与您所拥有的相差不远，只需将您的 CSS 更改为

.main-box:hover img {
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}

效果应该就是你想要的。

Updated fiddle to show results

编辑：

这个问题的最佳解决方案是在 CSS 中添加一个 :hover:before 元素。只要用户的鼠标悬停在有问题的 div 上，这就会在页面上的 div 上方创建新内容，并且通过给它一个绝对位置和 z-index，您添加到的所有效果该框将显示在悬停的内容上方 div.

以下CSS会给你想要的：

.main-box:hover:before {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}

此方法的问题是 :before 内容现在有效地覆盖了 div 中的所有内容；您希望用户能够使用的任何链接、输入字段或按钮 select 现在变得毫无用处。

虽然指针事件是通过这个新叠加层的最简单方法，但它具有糟糕的浏览器兼容性，因此我会推荐以下内容：

.main-box a, .main-box input { position: relative; z-index: 3; }
// etc.

对您希望用户能够访问的所有链接、文本或输入执行此操作 select 应该是可点击的，并且此解决方案应该在所有浏览器上兼容。

Newer fiddle

Parent div 的悬停属性不会影响 child 图片？

Parent div's hover attribute doesn't affect child image?

html

css

image

hover